How to Lazy Load Images in JavaScript

Lazy loading is a technique used to defer the loading of images until they are actually needed. This can improve the performance of your web page by reducing the initial load time and conserving bandwidth. In this article, we will explore different ways to implement lazy loading of images in JavaScript.

Ways to Lazy Load Images in JavaScript

1. Using Intersection Observer API
2. Using a Library or Plugin

1. Using Intersection Observer API

• The Intersection Observer API allows you to asynchronously observe changes in the intersection of a target element with an ancestor element or the viewport.
• By using the Intersection Observer API, you can detect when an image comes into the viewport and then load it dynamically.

Example:

const images = document.querySelectorAll("img[data-src]");

const options = {
  root: null, // null means the viewport
  rootMargin: "0px",
  threshold: 0.1, // 10% of the image visible
};

const handleIntersection = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
};

const observer = new IntersectionObserver(handleIntersection, options);

images.forEach((img) => observer.observe(img));

2. Using a Library or Plugin

• There are several libraries and plugins available that provide an easy-to-use solution for lazy loading images.
• These libraries handle all the complexities and offer additional features such as preloading, placeholder images, and advanced loading strategies.
• Examples of popular libraries: LazyLoad, Lozad.js, lazysizes.
• You can include the library in your project and follow their documentation to implement lazy loading.

Example:

const lazyLoadInstance = new LazyLoad({
  elements_selector: "img[data-src]",
});

Conclusion

Lazy load images in JavaScript can significantly improve the performance and user experience of your website by deferring the loading of non-visible images. By using the Intersection Observer API or leveraging existing libraries, you can easily implement lazy loading functionality without writing complex code.

Consider the needs of your project and the level of control you require when choosing between a custom implementation or a library. Experiment with different approaches and evaluate the impact on your website's performance. Implementing lazy loading can lead to faster page loads, reduced bandwidth usage, and a smoother browsing experience for your users.