Overview

Skill Level: Any Skill Level

Step-by-step

  1. 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.

    If a website includes JavaScript to provide content or functionality, scripts must wait for the entire Document Object Model (DOM) to download in order to run. Reducing the number of images synchronously downloaded to the user’s browser also makes the DOM lighter, allowing JavaScript to render user functionality much faster.

    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. 

    Web designers who are JavaScript conversant may want to code their own lazy loading solutions. Others can leverage lazy loading libraries.

  2. Lazy Loading Javascript Libraries

    Because different people use different browsers on different devices, when implementing a library for lazy loading, compatibility is critical. Here are some popular and extensively tested options for JavaScript-based lazy loading.

    Yall.js
    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
    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. 

    jQuery Lazy
    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.

  3. 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.

  4. 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:

    ioapi-1

    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:

    ioapi-2

    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.

    ioapi-3

    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.

  5. Conclusion

    In this article I covered the basics of lazy loading in JavaScript:

    • The benefits of lazy loading, including faster loading of DOM and JavaScript functionality, and reducing the number and size of files downloaded to the user’s browser.
    • Great JavaScript libraries that can help you implement lazy loading on your web pages – including Yall.js, lazysizes and jQuery Lazy. 
    • 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.

Join The Discussion