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 leve
npm install @mottor/vanilla-lazyload
Based on https://github.com/verlok/vanilla-lazyload
version: 17.3.0
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.



ā”ļø Jump to: šØāš» Getting started - HTML - š©āš» Getting started - Script - š„§ Recipes - šŗ Demos - š Tips & tricks - š API - šÆ Notable features
---
Love this project? š Buy me a coffee!
---
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:
``html`
#### Lazy image with low quality placeholder:
`html`
#### Lazy responsive image with srcset and sizes:
`html` alt="A lazy image"
class="lazy"
data-src="lazy.jpg"
data-srcset="lazy_400.jpg 400w,
lazy_800.jpg 800w"
data-sizes="100w"
/>
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:
`html`

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:
`html`
data-srcset="lazy_400.webp 400w,
lazy_800.webp 800w"
data-sizes="100w"
/>
alt="A lazy image"
class="lazy"
data-src="lazy.jpg"
data-srcset="lazy_400.jpg 400w,
lazy_800.jpg 800w"
data-sizes="100w"
/>
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:
`html`
Single background, with HiDPI screen support:
`html`
Multiple backgrounds:
`html
class="lazy"
data-bg-multi="url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc)"
>
...
ā¹ Please note that you must use
url() to wrap the URLs in your data-bg-multi attributes.Multiple backgrounds, HiDPI screen support:
`html
class="lazy"
data-bg-multi="url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc)"
data-bg-multi-hidpi="url(lazy-head@2x.jpg),
url(lazy-body@2x.jpg),
linear-gradient(#fff, #ccc)"
>
...
ā¹ Please note that you must use
url() to wrap the URLs in your data-bg-multi-hidpi attributes.#### Lazy video
`html
`Please note that the video poster can be lazily loaded too.
#### Lazy iframe
`html
`---
Love this project? š Buy me a coffee!
---
š©āš» Getting started - Script
The latest, recommended version of LazyLoad is 17.3.0.
Quickly understand how to upgrade from a previous version reading the practical upgrade guide.
$3
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.
$3
The easiest way to use LazyLoad is to include the script from a CDN:
`html
`Or, with the IntersectionObserver polyfill:
`html
`Then, in your javascript code:
`js
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
tag. If more DOM arrives later, e.g. via an AJAX call, you'll need to call lazyLoadInstance.update(); to make LazyLoad check the DOM again.
`js`
lazyLoadInstance.update();
You can use RequireJS to dynamically and asynchronously load modules in your website.
You can also find the original W3C'S IntersectionObserver Polyfill packed in AMD so you can require it conditionally, along with LazyLoad.
Include RequireJS:
`html`
Then require the AMD version of LazyLoad, like this:
`js
var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.amd.min.js";
var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js";
/// Dynamically define the dependencies
var dependencies = [
"IntersectionObserver" in window
? null // <- Doesn't require the polyfill
: polyfillAmdUrl,
lazyLoadAmdUrl
];
// Initialize LazyLoad inside the callback
require(dependencies, function(_, LazyLoad) {
var lazyLoadInstance = new LazyLoad({
// Your custom settings go here
});
}
`
If you prefer, it's possible to include LazyLoad's script using async script and initialize it as soon as it's loaded.
To do so, you must define the options before including the script. You can pass:
- {} an object to get a single instance of LazyLoad[{}, {}]
- an array of objects to get multiple instances of LazyLoad, each one with different options.
`html`
Then include the script.
`html`
async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.min.js"
>
Possibly place the script tag right before the closing tag. If you can't do that, LazyLoad could be executed before the browser has loaded all the DOM, and you'll need to call its update() method to make it check the DOM again.
Same as above, but you must put the addEventListener code shown below before including the async script.
`html`
Then include the script.
`html`
async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.0/dist/lazyload.min.js"
>
Now you'll be able to call its methods, like:
`js`
lazyLoadInstance.update();
Note about Internet Explorer: because this technique uses a CustomEvent to trigger the LazyLoad::Initialized event, you might want to add this polyfill to make it work on Internet Explorer.
DEMO - SOURCE ← for a single LazyLoad instance
DEMO - SOURCE ← for multiple LazyLoad instances
If you prefer to install LazyLoad locally in your project, you can!
#### Using npm
``
npm install vanilla-lazyload
#### Using bower
``
bower install vanilla-lazyload
#### Manual download
Download one the latest releases. The files you need are inside the dist folder. If you don't know which one to pick, use lazyload.min.js, or read about bundles.
Should you install LazyLoad locally, you can import it as ES module like the following:
`js`
import LazyLoad from "vanilla-lazyload";
It's also possible (but unadvised) to use the require commonJS syntax.
More information about bundling LazyLoad with WebPack are available on this specific repo.
Take a look at this example of usage of React with LazyLoad on Sandbox.
This implementation takes the same props that you would normally pass to the img tag, but it renders a lazy image. Feel free to fork and improve it!
Inside the dist folder you will find different bundles.
| Filename | Module Type | Advantages |
| ---------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| lazyload.min.js | UMD (Universal Module Definition) | Works pretty much everywhere, even in common-js contexts |lazyload.iife.min.js
| | IIFE (Immediately Invoked Function Expression) | Works as in-page