用 JS 实现图像延迟加载：释放您的页面速度！

前端

2024-01-06 18:48:00

图像延迟加载：改善网站性能的关键

图像延迟加载是一种优化图像加载的精妙技术，它仅在图像进入视口时才加载图像。通过避免一次性加载所有图像，这种方法可以显着减少页面加载时间并提升用户体验。

利用 JavaScript 实现图像延迟加载

要利用 JavaScript 实现图像延迟加载，我们将使用 IntersectionObserver API，该 API 允许我们监视元素何时进入或离开视口。让我们深入了解实现步骤：

选择图像元素： 首先，确定要延迟加载的图像元素。您可以使用 document.querySelectorAll() 方法来选择它们。
创建 IntersectionObserver 实例： 接下来，创建一个 IntersectionObserver 实例。这将允许我们监视图像何时进入或离开视口。
监听 intersection 事件： 将 intersection 事件监听器附加到 IntersectionObserver 实例。每当图像进入或离开视口时，都会触发此事件。
切换图像源： 在 intersection 事件处理程序中，检查图像是否在视口中。如果在视口中，则将 src 属性切换为图像的完整 URL。
处理错误： 务必处理图像加载失败的任何错误。您可以使用 onerror 事件处理程序来捕获错误并采取相应措施。

逐步指南

让我们逐步了解如何实现图像延迟加载功能：

选择图像元素： 使用 document.querySelectorAll() 方法选择图像元素。例如：
```
const images = document.querySelectorAll('img');
```

创建 IntersectionObserver 实例： 创建一个 IntersectionObserver 实例。例如：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 图像进入视口
    } else {
      // 图像离开视口
    }
  });
});

监听 intersection 事件： 将 intersection 事件监听器附加到 IntersectionObserver 实例。例如：
```
images.forEach((image) => {
  observer.observe(image);
});
```
切换图像源： 在 intersection 事件处理程序中，检查图像是否在视口中。如果在视口中，则将 src 属性切换为图像的完整 URL。例如：
```
if (entry.isIntersecting) {
  image.src = image.dataset.src;
}
```
处理错误： 使用 onerror 事件处理程序来捕获图像加载失败的任何错误。例如：
```
image.onerror = () => {
  // 图像加载失败
};
```