图片懒加载：使用 Intersection Observer API 优化网站性能

前端

2024-01-02 14:15:42

图片懒加载的重要性

在现代网络环境中，图片已成为网站不可或缺的一部分，它们可以传达信息、吸引用户并提升整体用户体验。然而，未经优化的图片会显著减缓网站加载速度，从而影响用户参与度和转换率。

图片懒加载是一种技术，它允许浏览器仅在需要时加载图片。通过这种方式，页面上的非关键图片会在用户滚动到它们的位置时才加载，从而释放宝贵的带宽资源并加快页面加载时间。

Intersection Observer API 简介

Intersection Observer API 是一个 JavaScript API，它提供了一种异步观察目标元素与其祖先元素或顶级文档视口之间交叉状态的方法。换句话说，它允许您检测元素何时进入或离开视口。

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

创建 Intersection Observer：

首先，创建一个 Intersection Observer 实例，并指定一个回调函数，该函数将在目标元素与视口相交时触发。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素可见，加载图片
      loadImage(entry.target);
    }
  });
});

观察目标图片：

使用 observe() 方法将 Intersection Observer 附加到要懒加载的图片元素。
```
observer.observe(imageElement);
```
加载图片：

在回调函数中，加载图片。这可以通过设置元素的 src 属性或使用 JavaScript 库来实现。
```
function loadImage(image) {
  image.src = image.dataset.src;
}
```