Performant Element lazy Load Library – Lozad

Category: Javascript , Loading , Recommended | May 23, 2020
Author: ApoorvSaxena
Views Total: 303 views
Official Page: Go to website
Last Update: May 23, 2020
License: MIT


Performant Element lazy Load Library – Lozad


Lozad is a small (569 bytes minified & gzipped), highly performant JavaScript library used to lazy load Html elements (e.g. images, iframes, backgrounds, etc.) using Intersection Observer Web API.


# Yarn
$ yarn add lozad

$ npm install lozad --save

# Bower
$ bower install lozad

How to use it:

Include the minified version of the Lozad.js on the html page.

<script src="lozad.min.js"></script>

Or include the JavaScript file from CDN:

<script src="//"></script>

Initialize the Lozad and we’re ready to go.

const observer = lozad();

Lazy load an image.

<img class="lozad" data-src="image.jpg" />

Lazy load responsive images.

<img class="lozad" data-src="image.jpg" data-srcset="image.jpg 960w, image-2x.jpg 2048w" />

Lazy load background image(s).

<div class="lozad" data-background-image="bg.jpg">

<!-- multiple bg images -->
<div class="lozad" data-background-image="bg1.jpg, bg2.jpg, bg3.jpg">

<!-- responsive bg images -->
<div class="lozad" data-background-image-set="url('bg.jpg') 1x, url('[email protected]') 2x">

Lazy load iframe elements.

<iframe data-src="iframe.html" class="lozad"></iframe>

The library also supports the picture tag.

<picture class="lozad" data-iesrc="1.jpg" data-alt="">
  <source srcset="1.jpg" media="(min-width: 1280px)">
  <source srcset="2" media="(min-width: 980px)">
  <source srcset="3" media="(min-width: 320px)">

Use the library to apply an active class to the element when it is scrolled into view.

<div data-toggle-class="active" class="lozad">
  Any content here

Override the default selector. Default: ‘lazad’.

const observer = lozad(el);

More configuration options.

const observer = lozad(el,{

      // CSS Margin 
      rootMargin: '10px 0px', 
      // ratio of image convergence
      threshold: 0.1 

Customize the load function.

const observer = lozad(el,{

      load: function(el) {
        console.log('loading element');
        // e.g. el.src = el.getAttribute('data-src');




  • v1.15.0: update


  • v1.14.0: update


  • v1.12.0: update


  • v1.11.0: update


  • v1.10.0: update


  • v1.9.0:  Html5 video element lazyloading


  • Improve compatibility of data-srcset with older browsers


  • Expose IntersectionObserver object


  • Fixed load() is not triggered sometimes

v1.6.0 (09/16/2018)

  • FIX: throwing an error during SSR
  • Added Intersection observer options root

v1.5.0 (07/17/2018)

  • alt attribute on lazy-loaded <picture> tags
  • Support toggling class

You Might Be Interested In:

Leave a Reply