A light-weight JS library to lazy load any HTML element such as images, ads, videos etc.
Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
Lozad.js:
minified & gzipped,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.
# You can install lozad with npm
$ npm install --save lozad
# Alternatively you can use Yarn.
$ yarn add lozad
# Another option is to use Bower.
$ bower install lozad
Then with a module bundler like rollup or webpack, use as you would anything else:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
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.min.js"></script>
When loading from CDN, you can find the library on window.lozad.
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 a DOM Element reference:
const el = document.querySelector('img');
const observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
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.getAttribute('data-src');
}
});
If you would like to extend the loaded state of elements, you can add the loaded option:
Note: The
"data-loaded"="true"attribute is used by lozad to determine if an element has been previously loaded.
lozad('.lozad', {
loaded: function(el) {
// Custom implementation on a loaded element
el.classList.add('loaded');
}
});
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
for use with responsive images
<!-- responsive image example -->
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w" />
for use with background images
<!-- background image example -->
<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')
// ... trigger the load of a image before it appears on the viewport
observer.triggerLoad(coolImage);
Create a broken picture element structure.
IE browser don't support picture tag! You need to set
data-iesrcattribute (only for your picture tags) with source for IE browser
<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg">
<source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
<source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
<source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
<!-- NO img element -->
<!-- instead of img element, there will be the last source with the minimum dimensions -->
<!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg"></noscript> -->
</picture>
When lozad load this picture element, it will fix it. That's all ))
<iframe data-src="embed.html" class="lozad"></iframe>
That's all, just add the lozad class.
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
Lozad.js is completely free and open-source. If you find it useful, you can show your support by starring it or sharing it in your social network or by simply letting me know how much you 💖 it by tweeting to @Apoorv_Saxena.
Interested in contributing features and fixes?
See the Changelog
FAQs
A light-weight JS library to lazy load any HTML element such as images, ads, videos etc.
The npm package lozad receives a total of 25,381 weekly downloads. As such, lozad popularity was classified as popular.
We found that lozad demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.