Lozad.js    

> Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API

!lozad.js lazy loading javascript library

Lozad.js:
- lazy loads elements performantly using pure JavaScript,
- is a light-weight library, just  minified & gzipped,
- has NO DEPENDENCIES :)
- allows lazy loading of dynamically added elements as well,
- supports <img>, <picture>, iframes, videos, audios, responsive images, background images and multiple background images etc.
- even supports LQIP (Low Quality Image Placeholder)
- is completely free and open source.

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.

Featured in:

- Web | Google Developers
- Product Hunt
- Reddit
- CSS Tricks
- David Walsh
- Codrops
- SitePoint

Brands using Lozad.js:

!Tesla          !Binance          !Domino's         
!BNP Paribas          !Mi         
!Amway          !TATA          !Verizon
!Atlassian !BNP Paribas
!JLM Couture          !New Balance          !BBC

and many more...

Table of Contents

- Demo
- Background
- Install
- Usage
- Example with picture tag
- Browser Support
- FAQs
- Contribute
- Changelog
- License

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

``sh


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:

`javascript
// 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.

`html

`

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):
`html

`

All you need to do now is just instantiate Lozad as follows:
`js
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();
`
or with a DOM Element reference:
`js
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:
`js
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1 // ratio of element convergence
});
observer.observe();
`
Reference:

- IntersectionObserver options: rootMargin
- IntersectionObserver options: thresholds

or if you want to give custom function definition to load element:
`js
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.
`js
lozad('.lozad', {
loaded: function(el) {
// Custom implementation on a loaded element
el.classList.add('loaded');
}
});
`

If you want to lazy load dynamically added elements:

`js
const observer = lozad();
observer.observe();

// ... code to dynamically add elements
observer.observe(); // observes newly added elements as well
`

for use with responsive images

`html


`

for use with background images
`html




`

for use with multiple background images
`html




`

for use with responsive background images (image-set)
`html




`

To change the delimiter that splits background images:
`html

class="lozad"
data-background-image="/first/custom,image,path/image.png-/second/custom,image,path/image.png"
data-background-delimiter="-"
>