图片懒加载技术：提升网页性能的最佳实践 | SEO优化指南

图片懒加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载页面中的图片，直到用户滚动到图片所在的位置时才加载图片。这样可以减少页面初始加载时的请求数量，提升页面加载速度，尤其是对于包含大量图片的页面来说，效果尤为显著。

实现图片懒加载的几种方式

1. 使用 IntersectionObserver API

IntersectionObserver 是现代浏览器提供的一个API，用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。它是实现图片懒加载的最佳选择，因为它性能高效且易于使用。

<img class="lazy" data-src="image-to-lazy-load.jpg" alt="Lazy Loaded Image">

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll('img.lazy');

  const lazyImageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src;
        lazyImage.classList.remove('lazy');
        lazyImageObserver.unobserve(lazyImage);
      }
    });
  });

  lazyImages.forEach(lazyImage => {
    lazyImageObserver.observe(lazyImage);
  });
});

2. 使用 loading="lazy" 属性

现代浏览器（如 Chrome 76+）支持 loading="lazy" 属性，这是一种非常简单的懒加载实现方式。只需在 img 标签中添加 loading="lazy" 属性即可。

<img src="image-to-lazy-load.jpg" loading="lazy" alt="Lazy Loaded Image">

这种方式不需要编写任何JavaScript代码，浏览器会自动处理图片的懒加载。

3. 使用 scroll 事件监听

如果你需要支持较老的浏览器，可以使用 scroll 事件监听来实现懒加载。这种方式虽然兼容性较好，但性能不如 IntersectionObserver。

<img class="lazy" data-src="image-to-lazy-load.jpg" alt="Lazy Loaded Image">

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll('img.lazy');

  const lazyLoad = () => {
    lazyImages.forEach(img => {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== "none") {
        img.src = img.dataset.src;
        img.classList.remove('lazy');
      }
    });
  };

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  lazyLoad(); // Initial check
});

最佳实践

1. 使用 IntersectionObserver：这是目前最推荐的方式，性能好且易于维护。
2. 提供占位符：在图片加载之前，可以使用一个占位符（如低质量的图片或纯色背景）来避免页面布局抖动。
3. 设置图片尺寸：为图片设置 width 和 height 属性，以避免图片加载时页面布局发生变化。
4. 兼容性处理：如果需要支持较老的浏览器，可以考虑使用 IntersectionObserver 的 polyfill 或回退到 scroll 事件监听的方式。

总结

图片懒加载是优化网页性能的重要手段之一。通过合理使用 IntersectionObserver 或 loading="lazy" 属性，可以显著提升页面的加载速度和用户体验。