实战：原生 Intersection Observer API 实现 Lazy Loading

在当今的网页开发中，优化用户体验和提高页面性能至关重要。其中，懒加载（Lazy Loading）技术是一种常见且有效的优化手段，它可以在用户滚动到特定位置时才加载图片或其他资源，从而减少初始页面加载时间。本文将详细介绍如何使用原生的 Intersection Observer API 来实现懒加载。

Intersection Observer API 为我们提供了一种高效、简洁的方式来检测元素是否进入视口。它避免了传统的滚动事件监听带来的性能问题。

我们需要创建一个 Intersection Observer 对象。通过传入一个回调函数，当被观察的元素与视口产生交叉时，该回调函数将会被触发。

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 加载资源的逻辑
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

接下来，为需要懒加载的元素添加相应的属性和数据。比如，对于图片元素，可以添加 data-src 属性来存储实际的图片地址。

<img data-src="image.jpg" alt="Example Image" />

然后，通过选择器获取这些元素，并使用 observer.observe() 方法来开始观察它们。

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

当元素进入视口时，回调函数中的逻辑会被执行，从而实现图片的加载。为了避免重复加载，在加载完成后使用 observer.unobserve() 方法停止对该元素的观察。

通过使用原生的 Intersection Observer API 实现懒加载，不仅能够提升页面的初始加载速度，还能减少不必要的资源请求，为用户提供更加流畅的浏览体验。在实际应用中，还可以根据具体需求进行进一步的优化和扩展，比如设置不同的交叉比例阈值、处理多个元素的懒加载等。

Intersection Observer API 为网页开发中的懒加载提供了强大而便捷的工具，值得我们在项目中广泛应用和探索。