What Is Lazy Loading?
Lazy loading of images entails loading a website’s pictures only after rendering of above-the-fold content, or only when an image enters the user’s screen—the browser viewport. If a viewer has not scrolled down, pictures that appear below the fold remain unloaded.
The two main reasons for lazy loading of a website’s images relate to both functionality and bandwidth.
The second reason relates to wasted resources. Most web users today use mobile devices. Many others only have access to slower devices and connections. For them, the website should only download what they can actually see. Preventing the download of extraneous material can dramatically improve page load times and conserve bandwidth.
Yet Another Lazy Loader (YALL) uses the intersection observer API, leveraging event listeners. A feature-packed script, it works on all browsers, including MS IE 11, and supports all major HTML elements. Unfortunately, it does not support background images.
Lazysizes is self-initiating and prioritizes images based on what is critical to view and what isn’t. A boon to performance enhancement, it supports widgets, iFrames, responsive images and more.
This lightweight plugin works best with Zepto or jQuery. It does support background images, and lazy loading of other content is possible using plugins and custom loaders.
What is Intersection Observer API?
The Intersection Observer API is a tool that can help you discover information needed to lazy-load content when users scroll through a page. The Observer lets you asynchronously observe intersection changes of an element on the page, either with the “root” document viewport, or another element on the page.
When using the Observer API, you can configure a callback for two types of events: intersection of the target element with the viewport or a specific element; or when the API is first required to observe a target. The API provides the same level of visibility for both of these callback methods.
Quick Tutorial: Lazy Loading with Intersection Observer API
The code in this tutorial was provided in a blog post by LogRocker.
When the intersection observer API identifies that a parent element or other target becomes visible within a browser viewport, or detects the intersection of two DOM elements, it invokes a handler function that lets you run code. Listen for an intersection observer event and—when it occurs—trigger a callback function.
It is important to set a margin for the root element, if relevant, letting you alter its size or shape on the intersection if required. To clarify, here is an example:
The above snippet incorporates a simple use case for defining an observer. The options object enables us to define custom target properties. Its threshold property determines at which point the callback is triggered. Its default value is zero, meaning that it triggers the callback the moment the target element approaches visibility.
The parent element, the root, serves as the target element’s viewport when it becomes visible as the user scrolls the webpage. If it equals null, the parent element automatically becomes the viewport.
rootMargin sets a margin surrounding the root element. Its size, dimension and margin settings often require tweaking prior to computing the target/parent element/viewport intersection.
The callback requires two input parameters and includes a list of intersectionObserverEntry objects that will later apply to the callback’s observer and target element.
Here is the callback signature:
When a DOM element is targeted, and intersects with a parent element, it triggers a callback function. Below you can see how to target a DOM element. A variable is assigned to a newly created target element. Following that, by employing the intersectionObserver constructor/function signature, we may observe the target element.
The callback is executed as soon as the observer-set threshold target is obtained. Finally, the observe() method informs the observer which target element it should observe.
- How to use the Intersection Observer API to implement lazy loading logic yourself, by triggering a callback when a required element enters the user’s viewpoint.
I hope this will help you implement lazy loading on your pages, improve page performance and make users happier.