用原生 JS 巧妙实现图片懒加载，提升页面加载速度

何谓图片懒加载？

在网络飞速发展的今天，网站和网页中充斥着各种各样的图片元素。而这些图片往往会拖慢网页的加载速度，影响用户体验。图片懒加载是一种优化技术，它允许您仅在用户滚动到该图片时加载该图片，从而避免不必要的前期加载。这种技术对于拥有大量图片的大型网站尤为重要。

如何使用原生 JS 实现图片懒加载？

1. 确定需要懒加载的图片

首先，我们需要确定需要进行懒加载的图片。通常情况下，您需要针对那些不在当前视口范围内的图片应用懒加载。

2. 添加自定义属性

对于需要懒加载的图片，添加一个自定义属性，如 data-src，并将图片的真实 URL 存储在这个属性中。例如：

<img src="" data-src="image.jpg" alt="示例图片">

3. 设置观察器

接下来，我们需要设置一个观察器，该观察器将在图片进入视口时通知我们。我们将使用 IntersectionObserver API 来实现此目的：

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

在这里，我们创建了一个 IntersectionObserver 实例，并在其 observe() 方法中定义了当目标元素（即图片）进入视口时的处理函数。我们将图片的真实 URL 从 data-src 属性中获取并赋给 src 属性，从而加载图片。

4. 监听图片

最后，我们需要监听需要懒加载的图片，并将它们添加到观察器中：

const images = document.querySelectorAll('img[data-src]');
images.forEach((image) => {
  observer.observe(image);
});

这样，当您滚动页面并使图片进入视口时，我们的懒加载功能就会启动，仅加载那些出现在用户视野中的图片。

优化建议

• 使用 rootMargin 选项在图片进入视口之前开始加载图片。
• 对于不支持 IntersectionObserver API 的旧版 IE 浏览器的用户，可以使用备用解决方案，如 scroll 事件处理程序或 JavaScript 库。
• 考虑使用图像占位符来改善用户体验，在图片加载时显示这些占位符。

总结

通过使用原生 JavaScript 中的图片懒加载技术，您能够显着优化网站的性能并提升用户体验。通过仅在需要时加载图片，我们避免了不必要的前期加载，从而加快了页面的加载速度。如果您正在寻找一种简单而有效的方法来提高您的网站速度，那么原生 JavaScript 懒加载绝对值得考虑。