Lozad.js
Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
Lozad.js:
- lazy loads elements performantly using pure JavaScript,
- is a light-weight library, just 535 bytes minified & gzipped,
- has NO DEPENDENCIES :)
- allows lazy loading of dynamically added elements as well,
- supports responsive images and background images
It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits.
Table of Contents
Yet another Lazy Loading JavaScript library, why?
Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect()
on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect()
forces the browser to re-layout the entire page and will introduce considerable jank to your website.
Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
Install
$ npm install --save lozad
$ yarn add lozad
$ bower install lozad
Then with a module bundler like rollup or webpack, use as you would anything else:
import lozad from 'lozad'
var lozad = require('lozad')
Or load via CDN and include in the head
tag of your page.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.js"></script>
or
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
When loading from CDN, you can find the library on window.lozad
.
Usage
In HTML, add an identifier to the element (default selector identified is lozad
class):
<img class="lozad" data-src="image.png" />
All you need to do now is just instantiate Lozad as follows:
const observer = lozad();
observer.observe();
or with custom options:
const observer = lozad('.lozad', {
rootMargin: '10px 0px',
threshold: 0.1
});
observer.observe();
Reference:
or if you want to give custom function definition to load element:
lozad('.lozad', {
load: function(el) {
console.log('loading element');
}
});
If you want to lazy load dynamically added elements:
const observer = lozad();
observer.observe();
observer.observe();
for use with responsive images
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w" />
for use with background images
<div class="lozad" data-background-image="image.png">
</div>
If you want to load the images before they appear:
const observer = lozad();
observer.observe();
const coolImage = document.querySelector('.image-to-load-first')
observer.triggerLoad(coolImage);
Browser Support
Available in latest browsers. If browser support is not available, then make use of this polyfill.
FAQs
Checkout the FAQ Wiki for some common gotchas to be aware of while using lozad.js
Contribute
Interested in contributing features and fixes?
Read more on contributing.
Changelog
See the Changelog
License
MIT © Apoorv Saxena