Web Resources - Lazy Loading



A Lazy loading method will fetch the resource (image, javascript module, advertisements) in the web browser window when needed.

When needed means for media such as image:

  • when they will become visible to the user
  • when the code is executed (code splitting)

Lazy loading is a technique that defers loading of non-critical resources at page load time.

Instead, these non-critical resources are loaded at the moment of need.

Where images are concerned, “non-critical” is often synonymous with “off-screen”.



HTML Element may have a lazy loading attribute.

Example with the loading attribute for img and iframe

<img src="image.png" srcset="image.png 1000w, image-2x.png 2000w" loading="lazy">

ViewPort detection

Solutions for detecting if an element is visible in the viewport (in order to lazy-load its content)


Solutions have often listened for scroll or resize events, then used DOM APIs like getBoundingClientRect() to calculate where elements are relative to the viewport. This works, but is not efficient. It have been error-prone, often causing the browser to become sluggish.

Web Api: IntersectionObserver

IntersectionObserver is a browser API that allows us to efficiently detect when an observed element enters or exits the browser's viewport.

const observer = new IntersectionObserver(entries => {
      const entry = entries[0];
      if (entry.isIntersecting) {
        document.body.style.backgroundColor = 'black';
        document.body.style.color = 'white';
      } else {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black';
    observer.observe(div, {
      threshold: 1.0
// observer.disconnect();


Image and video with Library

Image may be now lazy-loaded by the browser thanks to the new loading attribute.

Library for image and video by popularity

Example from Lazy Loading Images and Video after the DOMContentLoaded event.

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;

    lazyImages.forEach(function(lazyImage) {
  } else {
    // Possibly fall back to a more compatible method here





Lazy loading of ads ad


Discover More
Featured Snippet
Google Search

Title - The title of the site. URL - The URL of the result. Snippet - A description of the page description meta tag search...
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
HTML - Video Element (Movie)

The video represents a video or movie. It can be lazy or preloaded. * or without the child sub element To overcome that the images overflow their container, you can use this rule
How to create responsive images in HTML ? (from A to Z)

This article regroups all information about responsive image
React - Lazy

The lazy function implements lazy loading. (ie it will let you defer loading component’s code until it is rendered/executed for the first time) It's part of code splitting meaning that the build step...
Code Splitting

Code splitting is an operation performed by a bundler that splits code into chunks. You can then load only what is needed for a page to render. It's also known as route-chunking (where route refers to...
Firebug Netpanel Explained
Web - Page Load Time (Speed|Performance)

Goal: being interactive in under 5 seconds Duplicate of . Mobile web speeds matter. On average, faster experiences lead to 70% longer...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
What are the asynchronous Media Resource Fetch attribute ?

This page lists all fetch instructions (hint) that can be given to a media resources (stylesheet, script, font, image, ...) in order to speed up the loading of a web page

Share this page:
Follow us:
Task Runner