What is the Intersection Observer API?

What is the Intersection Observer API?

The Intersection Observer API is a JavaScript API that allows you to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

How can I use it to lazy load images?

You can use the Intersection Observer to detect when an image enters the viewport and then load it. This improves performance by only loading images when they are needed.

Can you provide a code example?

Sure! Here's a simple example:

const images = document.querySelectorAll('img[data-src]');
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
};

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

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

This code will load images only when they are about to enter the viewport.

What browsers support the Intersection Observer API?

The Intersection Observer API is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. However, you should check for specific versions for full compatibility.