What are some examples of using Intersection Observer in web development?

Can you explain what Intersection Observer is?

Intersection Observer 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.

What are some practical examples of using Intersection Observer?

You can use Intersection Observer for lazy loading images, implementing infinite scrolling, or triggering animations when elements come into view.

How do I implement lazy loading with Intersection Observer?

To implement lazy loading, create an Intersection Observer instance, specify a callback function to load images when they enter the viewport, and observe the image elements.

Can you provide a code snippet for that?

Sure! Here's a simple example:

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

const loadImage = (image) => {
  image.src = image.dataset.src;
};

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

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

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