Intersection Observer：图片懒加载新纪元

**## **

在追求流畅顺滑的用户体验的当下，网站和应用程序的性能优化至关重要。作为页面元素中重要组成部分的图片，其优化自然成为提升性能的关键。而 Intersection Observer 的出现，为我们带来了图片懒加载的新篇章。

**## **

Intersection Observer 是一种浏览器 API，它允许开发人员监视元素是否与视口相交。这个特性对于图片懒加载至关重要，因为我们可以使用它来仅在元素进入视口时才加载图像。

**## **

### Intersection Observer 的工作原理

Intersection Observer 允许我们为元素创建观察器。当元素与视口相交时，观察器会触发回调函数。我们可以使用此回调函数来动态加载图像。

### 优势

• 提升性能： 仅加载用户可见的图像，减少初始加载时间。
• 节省带宽： 避免加载不必要的图像，降低带宽消耗。
• 更好的用户体验： 页面加载速度更快，用户交互更流畅。

### 实践

1. 创建观察器

const observer = new IntersectionObserver(callback, options);

其中：

• callback 是元素与视口相交时触发的函数。
• options 是配置观察器行为的可选参数。

2. 观察元素

observer.observe(element);

3. 回调函数

在回调函数中，我们可以动态加载图像：

function callback(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
}

### 结论

Intersection Observer 是图片懒加载的强大工具，它可以显著提升网站和应用程序的性能。通过仅在需要时加载图像，我们可以优化页面加载时间，节省带宽，并为用户提供更好的体验。

### 附录：示例代码

<img data-src="image.jpg" class="lazyload">

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, {
  rootMargin: "0px",
  threshold: 0
});

document.querySelectorAll(".lazyload").forEach((element) => {
  observer.observe(element);
});