vanilla-lazyload

`html

`

$3

`html

`

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

$3

`html

`

---

Love this project? 😍 Buy me a coffee!

---

👩‍💻 Getting started - Script

The latest, recommended version of LazyLoad is 19.1.3.
Note that if you need to support Internet Explorer 11, you need to use version 17.9.0 or below.

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

$3

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

`html

`

OR, if you prefer to import it as an ES module:

`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();
`

$3

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@19.1.3/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.

$3

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@19.1.3/dist/lazyload.min.js"
>
`

Now you'll be able to call its methods, like:

`js
lazyLoadInstance.update();
`

DEMO - SOURCE ← for a single LazyLoad instance

DEMO - SOURCE ← for multiple LazyLoad instances

$3

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.

$3

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.

$3

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!

$3

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