ApoorvSaxena / lozad.js
- вторник, 12 сентября 2017 г. в 10:37:22
Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more
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:
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.
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.
Get the library using one of the following ways:
Full build
Yarn : yarn add lozad
Bower : bower install lozad
npm: npm install --save lozad
Now include the library in the HEAD
tag of your page:
<script type="text/javascript" src="lozad.js"></script>
or
<script type="text/javascript" src="lozad.min.js"></script>
Note: lozad.js
supports AMD and commonJS module pattern out of the box.
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(); // lazy loads elements with default selector as '.lozad'
observer.observe();
or with custom options:
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1 // ratio of element convergence
});
observer.observe();
Reference:
or if you want to give custom function definition to load element:
lozad('.lozad', {
load: function(el) {
console.log('loading element');
// Custom implementation to load an element
// e.g. el.src = el.dataset.src;
}
});
If you want to lazy load dynamically added elements:
const observer = lozad();
observer.observe();
// ... code to dynamically add elements
observer.observe(); // observes newly added elements as well
Available in latest browsers. If browser support is not available, then make use of this polyfill.
Checkout the FAQ Wiki for some common gotchas to be aware of while using lozad.js
Interested in contributing features and fixes?
See the Changelog