• No dependencies
• No unnecessary requests
• Handles responsive images
• SEO friendly (doesn't remove the src attribute)

npm i lazzy

Require as a module:

const lazzy = require('lazzy');

In browser:

<script src="dist/lazzy.min.js"></script>

To use lazzy just add the .lazzy class and the following srcset to your images:

<img class="lazzy"
    src="images/1200.png"
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="" />

To use lazzy with responsive images, list your images in the data-srcset attribute:

<img class="lazzy"
    src="images/1200.png"
    data-srcset="images/400.png 400w, images/600.png 600w, images/1000.png 1000w"
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    alt="" />

You don't need to init lazzy. But if you want to use a custom selector, run the following code:

lazzy.run('.my-lazzy-selector');

or specify multiple selectors:

lazzy.run(['.my-lazzy-page img', '.my-lazzy-selector']);

With Lazzy, you can easily preload images by setting the preload rule:

lazzy.run({
    selector: ['.my-lazzy-page img', '.my-lazzy-selector'],
    preload: '100px' // Load images 100px earlier
});

or

lazzy.run({
    preload: 100 // Load images 100px earlier
});

or, set the preload as a percentage of the current viewport height:

lazzy.run({
    preload: '20%' // Load images 20% earlier
});

Request an image in resolution depending on Pixel density (PPI)

lazzy.run({
    isDependingOnPixelDensity: true // false, by default
});

A lightweight lib that doesn't break your HTML by removing the src.

To avoid unnecessary requests lazzy uses a base64-encoded 1x1px image in the srcset attribute as a placeholder - data:image/gif;base64,R0lGOD...

Note that you can use your own placeholder images. For example, blurred previews when downloading better quality images.

The lazy loading works in browsers supporting the srcset attribute, that's about 90%.

Unsupported browsers will load the image in the src attribute. That's the image search engines and social networks will find, so it's better to make it high resolution.

The library will listen for DOM changes and you can also trigger visible images loading by calling: lazzy.run().

Free to use under the MIT license.