Performant Element lazy Load Library – Lozad

Category: Javascript , Loading , Recommended | February 10, 2019
Author: ApoorvSaxena
Views Total: 2,189
Official Page: Go to website
Last Update: February 10, 2019
License: MIT


Performant Element lazy Load Library – Lozad


Lozad is a small (569 bytes minified & gzipped), highly performant JavaScript library used to lazy load any html elements (e.g. images, videos, 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>

Create a new Lozad object and specify the target element to lazy load.

new Lozad({
    selectorClass: 'lozad'

More configuration options.

new Lozad({
    selectorClass: 'lozad',
    rootMargin: '10px 0px', // CSS Margin
    threshold: 0.1 // ratio of image convergence



  • 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