用一个简单的方法实现图片懒加载

前端

2023-10-07 22:57:57

图片懒加载：提升页面加载速度的简单方法

在现代网络世界中，图片已成为网页设计中不可或缺的元素。它们可以传达信息、吸引用户并提升整体用户体验。然而，如果图片加载缓慢，可能会对网站性能产生负面影响，从而导致用户流失和收入损失。

图片懒加载是一种技术，可以延迟图片加载，直到它们出现在用户视口中。这可以通过减少初始页面加载时间和提升页面响应速度来显著改善用户体验。

如何实现图片懒加载

实现图片懒加载非常简单。以下是使用JavaScript的步骤：

为要懒加载的图片添加loading="lazy"属性。
使用JavaScript库或代码片段来检测图片是否进入视口。
如果图片进入视口，则加载图片。

以下是一个使用vanilla JavaScript实现图片懒加载的示例：

// 获取所有带有 "loading="lazy"" 属性的图片
const lazyImages = document.querySelectorAll("img[loading='lazy']");

// 为每个图片添加监听器，检测是否进入视口
lazyImages.forEach((img) => {
  img.addEventListener("load", () => {
    img.classList.remove("lazy");
  });

  // 检查图片是否进入视口
  checkIntersection(img);
});

// 检查图片是否进入视口
const checkIntersection = (img) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  observer.observe(img);
};