🚀 Introducing Lozad.js: Performant & light lazy loading library

Lazy loading is a programming practice in which a component is loaded only at the time of need. This gives great performance boost especially when the time taken to load a component is significant, and there are several such components in an application.

In webpages, images/social-widgets/ads/videos etc. contribute majorly to the increase in page load time because of their size or the resources loaded by them. Thus, to decrease page load time, it's absolutely necessary to lazy load all such components which are not critical, at the time of need.

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.

Introducing Lozad.js:

• lazy loads elements performantly using pure JavaScript,
• is a light-weight library, just 535 bytes minified & gzipped,
• has NO DEPENDENCIES :)
• allows lazy loading of dynamically added elements as well.

Install

# 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

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>

Usage

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:

// lazy loads elements with default selector as '.lozad'
const observer = lozad();
observer.observe();

For details, checkout Lozad.js repo on Github