lazyload

by verlok

verlok / lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of y...

5.8K Stars 571 Forks Last release: 4 months ago (17.1.3) MIT License 1.6K Commits 147 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading. See notable features for more.

vanilla-lazyload (latest) vanilla-lazyload (downloads)

➑️ Jump to: πŸ‘¨β€πŸ’» Getting started - HTML - πŸ‘©β€πŸ’» Getting started - Script - πŸ₯§ Recipes - πŸ“Ί Demos - πŸ˜‹ Tips & tricks - πŸ”Œ API - 😯 Notable features


Love this project? 😍 Buy me a coffee!


πŸ‘¨β€πŸ’» Getting started - HTML

In order to make your content be loaded by LazyLoad, you must use some

data-
attributes instead of the actual attributes. Examples below.

Lazy image:

A lazy image

Lazy image with low quality placeholder:

A lazy image

Lazy responsive image with
srcset
and
sizes
:

A lazy image

To have a low quality placeholder, add the

src
attribute pointing to a very small version of the image. E.g.
src="lazy_10.jpg"
.

Lazy responsive image with hi-dpi support using the
picture
tag:


  
  
  A lazy image

To have a low quality placeholder, add the

src
attribute pointing to a very small version of the image to the
img
tag. E.g.
src="lazy_10.jpg"
.

Lazy responsive image with automatic WebP format selection, using the
picture
tag:


  
  A lazy image

To have a low quality placeholder, add the

src
attribute pointing to a very small version of the image to the
img
tag. E.g.
src="lazy_10.jpg"
.

Lazy background image

⚠ IMPORTANT NOTE: To display content images on your pages, always use the

img
tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: "would my website user like to see those images when printing out the page?". If the answer is "yes", then your images are content images and you should avoid using background images to display them.

Single background image:

Single background, with HiDPI screen support:

Multiple backgrounds:

...

β„Ή Please note that you must use

url()
to wrap the URLs in your
data-bg-multi
attributes.

Multiple backgrounds, HiDPI screen support:

...

β„Ή Please note that you must use

url()
to wrap the URLs in your
data-bg-multi-hidpi
attributes.

Lazy video


Please note that the video poster can be lazily loaded too.

Lazy iframe



Love this project? 😍 Buy me a coffee!


πŸ‘©β€πŸ’» Getting started - Script

The latest, recommended version of LazyLoad is 17.1.3.

Quickly understand how to upgrade from a previous version reading the practical upgrade guide.

To polyfill or not to polyfill IntersectionObserver?

On browser NOT supporting IntersectionObserver such as Internet explorer and older versions of Safari you can choose whether or not to add a javascript polyfill for it.

If you don't use a polyfill, LazyLoad will load all the images as soon as it's downloaded and executed. The number of impacted users would be relatively small, so this is a completely acceptable choice.

If you prefer to load a polyfill, the regular LazyLoad behaviour is granted.

The simple, easiest way

The easiest way to use LazyLoad is to include the script from a CDN:


Or, with the IntersectionObserver polyfill:


Then, in your javascript code:

var lazyLoadInstance = new LazyLoad({
  // Your custom settings go here
});

To be sure that DOM for your lazy content is ready when you instantiate LazyLoad, place the script tag right before the closing

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.