图片懒加载的原理和实现方式

定义与原理

图片懒加载（Lazy Loading）是一种网页性能优化技术，它延迟加载页面中非可视区域的图片，只有当图片即将进入用户可视区域时才进行加载。这样可以减少初始页面加载时间、降低服务器负载和节省带宽。

为什么需要图片懒加载

1. 提升页面加载速度：只加载可视区域内的图片，减少初始HTTP请求数量
2. 节省带宽资源：用户可能不会滚动到页面底部，不必要加载所有图片
3. 提升用户体验：页面可以更快地呈现主要内容，减少用户等待时间
4. 减轻服务器压力：减少不必要的图片请求，降低服务器负载

实现方式

1. 基于滚动事件监听

原理：

• 给图片设置一个自定义属性（如data-src）存储真实图片地址，src属性可以设置为空或占位图
• 监听滚动事件，计算每个图片元素的位置与可视区域的关系
• 当图片进入可视区域时，将data-src的值赋给src属性，触发图片加载

代码示例：

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  
  if ("IntersectionObserver" in window) {
    // 如果浏览器支持Intersection Observer，使用更高效的方式
  } else {
    // 回退到滚动事件监听方式
    let active = false;
    
    const lazyLoad = function() {
      if (active === false) {
        active = true;
        
        setTimeout(function() {
          lazyImages.forEach(function(lazyImage) {
            if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.classList.remove("lazy");
              
              lazyImages = lazyImages.filter(function(image) {
                return image !== lazyImage;
              });
              
              if (lazyImages.length === 0) {
                document.removeEventListener("scroll", lazyLoad);
                window.removeEventListener("resize", lazyLoad);
                window.removeEventListener("orientationchange", lazyLoad);
              }
            }
          });
          
          active = false;
        }, 200);
      }
    };
    
    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
    window.addEventListener("orientationchange", lazyLoad);
    lazyLoad();
  }
});

优点：

• 兼容性好，支持所有主流浏览器
• 实现简单直观

缺点：

• 滚动事件频繁触发，性能较差
• 需要手动计算元素位置，代码复杂
• 滚动事件处理函数需要做节流处理，否则会影响性能

2. 基于Intersection Observer API

Intersection Observer API是现代浏览器提供的一种异步检测目标元素与祖先元素或视口相交情况的方法。它是实现懒加载的更高效方式。

原理：

• 创建一个Intersection Observer实例，配置回调函数和选项
• 观察所有需要懒加载的图片元素
• 当图片元素进入可视区域时，触发回调函数，加载图片

代码示例：

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);
        }
      });
    }, {
      rootMargin: "0px 0px 200px 0px"  // 提前200px加载
    });
    
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // 回退到滚动事件监听方式
  }
});

优点：

• 性能更好，由浏览器内部优化，不依赖主线程
• 代码更简洁，不需要手动计算元素位置
• 可以配置提前加载的距离（rootMargin）
• 不需要节流处理

缺点：

• 不支持旧版浏览器（如IE）
• 需要添加polyfill以支持更多浏览器

3. 使用loading属性（原生懒加载）

现代浏览器（Chrome 76+、Firefox 75+、Edge 79+）支持原生的图片懒加载，只需给<img>标签添加loading="lazy"属性。

原理：

• 浏览器原生支持，无需JavaScript
• 浏览器自动判断图片是否进入可视区域，并决定何时加载

代码示例：

<img src="image.jpg" loading="lazy" alt="..." width="200" height="200">

优点：

• 实现最简单，只需添加一个属性
• 性能最好，由浏览器内部优化
• 无需额外JavaScript代码

缺点：

• 浏览器支持有限，不兼容所有浏览器
• 可定制性差，无法控制加载时机和提前加载的距离

4. 使用第三方库

有许多成熟的第三方库可以实现图片懒加载，如：

• lozad.js
• lazysizes
• yall.js
• Echo.js

原理：

• 这些库封装了懒加载的逻辑，通常基于Intersection Observer API或滚动事件
• 提供更多功能和配置选项

代码示例（以lozad.js为例）：

<!-- 引入lozad.js -->
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

<!-- HTML -->
<img class="lozad" data-src="image.jpg" alt="...">

<!-- JavaScript -->
<script>
  const observer = lozad(); // 默认配置
  observer.observe();
</script>

优点：

• 功能丰富，通常提供更多配置选项
• 已经处理了各种边界情况和兼容性问题
• 可能包含额外功能，如占位图、加载动画等

缺点：

• 增加项目依赖和体积
• 可能包含不需要的功能

实现方式对比

最佳实践

1. 优先使用原生懒加载：如果不需要支持旧浏览器，优先使用loading="lazy"属性
2. 使用Intersection Observer API：需要兼容更多浏览器时，使用Intersection Observer API，并提供滚动事件监听作为回退方案
3. 考虑使用第三方库：如果项目需要更多功能或不想处理实现细节，可以使用成熟的第三方库
4. 添加占位图：为未加载的图片添加占位图或背景色，避免页面布局跳动
5. 提前加载：设置适当的提前加载距离，提升用户体验
6. 考虑图片格式：使用现代图片格式如WebP，减少图片体积
7. 响应式图片：结合srcset和sizes属性，为不同设备提供适当大小的图片