交叉观察者 IntersectionObserver 实现懒加载技术指南

前端

2024-02-12 09:05:36

1. 理解 IntersectionObserver API

IntersectionObserver 是一个 Web API，用于监听目标元素相对于其祖先元素或视口的相对位置的变化。它可以帮助我们了解元素是否进入或离开视口。

2. 懒加载基本原理

懒加载的基本原理是，只加载当前显示在页面上的图像，而将其他图像的加载推迟到它们进入视口时再进行。这可以大大减少页面初始加载的资源开销，加快页面加载速度。

3. IntersectionObserver 实现懒加载步骤

创建一个 IntersectionObserver 实例。
告诉 IntersectionObserver 要监视哪些元素。
定义当元素进入或离开视口时要执行的回调函数。
调用 IntersectionObserver 实例的 observe() 方法开始监听元素。

4. 示例代码

<script>
  const lazyImages = document.querySelectorAll('.lazy-image');

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

  lazyImages.forEach((image) => {
    intersectionObserver.observe(image);
  });
</script>