Lozad.js: Performant Lazy Loading of Images

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

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

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”
Read here about the complete list of options available in Lozad.js API.
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.

Lozad.js: Performant Lazy Loading of Images is a post from CSS-Tricks
Source: CssTricks

Posted on September 26, 2017 in API, Austin Web Designer, browser, css, custom, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, html, javascript, performance, RSS, The, user, Web Design Services, website

Share the Story

Back to Top