使用Intersection Observer实现图片的懒加载效果

随着 web 页面的不断增加，图片数量的增加也成为了一个常见的问题。当页面中存在大量的图片时，如果一次性加载所有图片，会导致网页加载变慢，消耗用户宝贵的时间和带宽。

为了解决这个问题，我们可以使用 Intersection Observer 来实现图片的懒加载效果。Intersection Observer 是 HTML5 的一个新的 API，它提供了一种异步监测目标元素与其祖先元素或 viewport 的交叉状态的方法，从而实现懒加载的效果。

Intersection Observer 基本原理

Intersection Observer 可以监测目标元素（例如图片）与其祖先元素或 viewport 的交叉状态，并通过回调函数处理交叉状态的变化。

当目标元素进入或离开视口时，会触发 Intersection Observer 的回调函数，并将相关信息传递给该函数。开发者可以根据传递的信息来实现图片的懒加载效果。

使用 Intersection Observer 实现图片的懒加载

首先，为了使用 Intersection Observer，我们需要创建一个 Intersection Observer 实例，并指定一个回调函数。在这个回调函数中，我们可以根据目标元素与视口的交叉状态来处理相应的操作。以下是一个使用 Intersection Observer 实现图片懒加载的示例：

const lazyImages = document.querySelectorAll('.lazy');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) { // 如果目标元素进入视口
        const img = entry.target;
        const src = img.getAttribute('data-src');

        img.setAttribute('src', src);
        img.classList.remove('lazy');

        observer.unobserve(img); // 停止对目标元素进行交叉状态的监测
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

在上述示例中，我们首先通过 querySelectorAll 方法获取到所有带有 lazy 类名的图片元素，并将它们存储在 lazyImages 变量中。

然后，我们定义了一个 lazyLoad 函数，它接受一个目标元素作为参数。在函数内部，我们创建了一个 Intersection Observer 实例 io，并在其回调函数中处理目标元素与视口交叉状态的变化。

当目标元素进入视口时，我们通过 getAttribute 方法获取到图片的真实地址，并将其设置为 src 属性的值。然后，我们移除 lazy 类名，表示该图片已加载。

最后，我们通过调用 observe 方法，将目标元素加入到 Intersection Observer 的监测列表中。

最后，我们使用 forEach 方法遍历每个图片元素，并调用 lazyLoad 函数，实现图片的懒加载效果。

结语

通过使用 Intersection Observer，我们可以实现图片的懒加载效果，从而优化网页加载速度，提升用户体验。希望这篇博客可以帮助你理解和使用 Intersection Observer 来实现图片的懒加载效果。如果你对这个话题有更多的疑问或者想要了解更多相关内容，请留言给我，我会尽力解答。