图片懒加载是如何实现的？IntersectionObserver真是太好用了！

前端

2023-05-17 02:37:28

图像懒加载：优化网站性能的不二法门

在当今快节奏的网络世界中，网站的加载速度已成为用户体验的关键因素。图像，作为网页内容的重要组成部分，往往占据了大量的数据传输，拖慢了网站的加载。图像懒加载 应运而生，成为提高网站性能的绝佳解决方案。

什么是图像懒加载？

图像懒加载是一种技术，可以推迟图像的加载，直到它们出现在用户的可视区域内。与立即加载所有图像的传统方法不同，懒加载仅在需要时才请求并显示图像。这减少了对服务器的请求，优化了网站的响应速度。

实现图像懒加载的方法

实现图像懒加载有多种方法，其中最简单的方法是使用 <img> 标签的 loading 属性。此属性接受三个值：

eager： 立即加载图像（默认值）
lazy： 延迟加载图像，直到它们出现在可视区域内
auto： 浏览器根据其策略决定何时加载图像

以下示例代码使用 loading 属性实现图像懒加载：

<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">

除了使用 loading 属性，还可以使用 JavaScript 实现图像懒加载。最常用的 JavaScript 库之一是 IntersectionObserver，它允许您监听元素是否出现在可视区域内，并相应地加载图像。

以下示例代码使用 IntersectionObserver 实现图像懒加载：

// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
});

// 添加要懒加载的图像
document.querySelectorAll('.lazy-image').forEach((image) => {
  observer.observe(image);
});