- 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.