A High-Performance lazyLoad Library | lozad.js

Lozad.js, high-performance, lightweight, and configurable Lazy Loader in pure JS without any image dependencies, iframes, and more, using the IntersectionObserver API.

lazyload js demo, lazyload images, jquery lazyload, lazy loading example, vanilla lazyload, loading lazy not working, lazy load library

Key Features:

  • It loads elements slowly using pure JavaScript.
  • It is a lightweight library that has been minimized and compressed.
  • It allows the slow loading of dynamically adding elements as well.
  • Supports <img>, <picture>, iframes, video clips, audios, responsive images, background¬†images, multiple background images, etc.
  • Even supports LQIP (Low-Quality Image Placeholder)
  • Completely free and open source.

How to make use of it:

Installation:

# Yarn
$ yarn add lozad

# NPM
$ npm install lozad --save

# Bower
$ bower install lozad

Include the minified version of the Lozad.js on the HTML web page.

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

Or include the JavaScript file from CDN:

<script src="//cdn.jsdelivr.net/npm/lozad"></script>

Initialize the Lozad and were ready to go.

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

Lazy load an image.

// Add Images Here --- See Downloaded File

Lazy load responsive photos.

// Add Images Here --- See Downloaded File

Lazy load background picture(s).

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

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

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

Lazy load iframe parts.

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

The library additionally helps the image 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)">
</picture>

Use the library to apply an active class to the component when it’s scrolled into view.

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

Override the default selector. Default:

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');
      }

});

Performant Element lazyLoad Library, lazy loading javascript


See Demo And Download

Official Website(ApoorvSaxena): Click Here

This superior jQuery/javascript plugin is developed by ApoorvSaxena. For extra Advanced Usages, please go to the official website.

Leave a Comment