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
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:
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”>
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 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
Lozad.js: Performant Lazy Loading of Images