Lozad.js: Performant Lazy Loading of Images

There are a few different “traditional” ways of lazy loading of images. They all require JavaScript needing to figure out if an image is currently visible within the browser’s viewport or not. Traditional approaches might be:

• Listening to scroll and resize events on the window
• Using a timer like setInterval

Both of these have performance problems.

Why traditional approaches are not performant?

Both of those approaches listed above are problematic because they work repeatedly and their function triggers **forced layout while calculating the position of the element with respect to the viewport, to check if the element is inside the viewport or not.

To combat these performance problems, some libraries throttle the function calls that do these things, limiting the number of times they are done.

Even then, repeated layout/reflow triggering operations consume precious time while a user interacts with the site and induces “junk” (that sluggish feeling when interacting with a site that nobody likes).

There is another approach we could use, that makes use of a new browser API designed specifically to help us with things like lazy loading: the Intersection Observer API.

That’s exactly what my own library, Lozad.js, uses.

What makes Lozad.js performant?

Intersection Observers are the main ingredient. They allow registration of callback functions which get called when a monitored element enters or exits another element (or the viewport itself).

While Intersection Observers don’t provide the exact pixels which overlap, they allow listening to events that allow us to watch if elements enter other elements by X% (configurable), then the callback gets fired. That is exactly our use case when using Intersection Observers for lazy loading.

Quick facts about Lozad.js

• Light-weight: just 535 bytes minified & gzipped
• No dependencies
• Uses the IntersectionObserver API
• Allows lazy loading of dynamically added elements as well (not just images), though a custom load function

Usage

Install from npm:

yarn add lozad

or via CDN:

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

In your HTML, add a class to any image you wish to lazy load. The class can be changed via configuration, but “lozad” is the default.

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

Also note we’ve removed the src attribute of the image and replaced it with data-src. This prevents the image from being loaded before the JavaScript executes and determines it should be. It’s up to you to consider the implications there. With this HTML, images won’t be shown at all until JavaScript executes. Nor will they be shown in contexts like RSS or other syndication. You may want to filter your HTML to only use this markup pattern when shown on your own website, and not elsewhere.

In JavaScript, initialize Lozad library with the options:

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

Read here about the complete list of options available in Lozad.js API.

Demo

See the Pen oGgxJr by Apoorv Saxena (@ApoorvSaxena) on CodePen.

Browser support

Browser support is limited, as the feature is relatively new. Use the official IntersectionObserver polyfill to overcome the limited support of this API.