- Listening to
resizeevents on the
- Using a timer like
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
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">
Also note we've removed the
src attribute of the image and replaced it with
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.
Browser support is limited, as the feature is relatively new. Use the official IntersectionObserver polyfill to overcome the limited support of this API.