DEV Community

Tiago Rangel
Tiago Rangel

Posted on ā€¢ Originally published at blog.tiagorangel.com on

How to implement lazy loading in your website

As web applications grow larger and more complex, it's important to consider how to optimize the user experience for slow internet connections or underpowered devices. One way to achieve this is by implementing lazy loading, which is a technique that delays loading of images or other content until it is needed.

Here's a simple implementation of lazy loading using the Intersection Observer API:

const images = document.querySelectorAll("img");

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.1
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
}, options);

images.forEach(image => {
  observer.observe(image);
});

Enter fullscreen mode Exit fullscreen mode

The Intersection Observer API makes it easy to detect when an element enters or leaves the viewport, which is ideal for lazy loading. In this example, we query all img elements on the page and observe each one. When the observer determines that an image has entered the viewport, it sets the src attribute to the value stored in the data-src attribute, effectively loading the image.

Note that this is just one example of how to implement lazy loading, and there are many other techniques and libraries available. No matter what approach you take, the goal is to make your web applications fast and responsive, regardless of the network or device conditions. For example, one of the easiest ways to lazy load images in HTML is by using the loading="lazy" property:

<img src="/image.png" loading="lazy">

Enter fullscreen mode Exit fullscreen mode

It's also recommended to lazy load content. An easy and fast way to use this is, for example, to make multiple fetches. Or you can even use WebSockets!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ā¤ļø