引言：

在前端开发中，页面加载速度直接关系到用户体验和网站SEO评分。为了提升性能，懒加载（Lazy Loading）技术应运而生，尤其在处理重量级的媒体资源如图片时尤为重要。本文将详细解析图片懒加载的背景、实现机制及其在前端开发中的应用，带领读者深入理解这一关键的Web性能优化技术。

一、为何需要图片懒加载

在许多Web应用中，图片资源往往是占用带宽最多的部分，直接加载所有图片会造成以下问题：

• 首屏加载缓慢，影响用户体验。
• 即使页面上未进入可视区域的图片也会被加载，造成带宽浪费。
• 服务器压力增大，加载时间延长。

二、图片懒加载的原理

图片懒加载是一种优化技术，它通过延迟加载非首屏图片来减少初始加载时间和数据传输。原理如下：

• 页面初始化时，仅加载在当前用户可视范围内的图片。
• 对于其他图片，先使用一张轻量级的图片占位。
• 当用户滚动页面，将要进入视图区域的图片才开始加载。

三、实现图片懒加载的方法

1. 使用Intersection Observer API

这是一种现代、高效的图片懒加载实现方式，可以自动观察元素是否进入可视区域。

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for browsers that don't support IntersectionObserver
  }
});

这段代码会在DOM加载完成后查询所有带有.lazy类的图片，并使用IntersectionObserver来观察它们。一旦图片进入视口，就会替换其src属性并加载图片。

2. 事件监听与getBoundingClientRect

在不支持Intersection Observer API的浏览器中，我们可以通过监听scroll事件并计算元素的位置来实现懒加载。

function lazyload() {
    var images = document.querySelectorAll("img.lazy");
    for (var i = 0; i < images.length; i++) {
        var image = images[i];
        var rect = image.getBoundingClientRect();
        if (rect.bottom >= 0 && rect.top <= window.innerHeight) {
            image.src = image.dataset.src;
            image.classList.remove("lazy");
        }
    }
}

window.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);

此方法需要更多的手动处理，可能会引起滚动性能问题。正确地使用节流（throttling）和防抖（debouncing）技术可以减少性能影响。

四、图片懒加载的最佳实践

• 1. 预加载：在用户的停留时间内预先加载下一屏的图片，提升用户的体验。
• 2. 占位符：加载前使用轻量级占位符，保持页面的结构，防止布局抖动。
• 3. 逐渐增加清晰度：先显示一个模糊的图片预览，然后再加载高清图片。
• 4. 响应式图片：通过srcset和sizes属性设置适合不同屏幕大小的图片。

结语：
图片懒加载是一个重要的Web性能优化策略，它能够显著减少首屏加载时间，节省带宽和服务器资源，并提升用户体验。通过详细理解其原理和实现方式，前端开发者可以在自己的工程实践中应用这一技术，以更高效、智能的方式加载页面内容。希望本文能够帮助您深入理解并掌握图片懒加载技术，以此提升您的前端性能调优实力。

原文链接：https://juejin.cn/post/7318083877503221810 作者：慕仲卿