常见图片懒加载方式全解析

图片懒加载是一种优化网页性能的技术，主要用于延迟加载页面中的图片，直到它们进入或即将进入视口（viewport）时才加载。以下是几种常见的图片懒加载方式：

1. Intersection Observer API

• 原理：利用浏览器提供的 IntersectionObserver API 来监听图片元素是否进入视口。
• 优点：性能高效，原生支持，无需手动计算滚动位置。
• 示例代码：

  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  
  images.forEach(img => observer.observe(img));
  

2. 滚动事件监听 + 手动计算

• 原理：通过监听 scroll 事件，手动计算图片是否进入视口。
• 优点：兼容性好，适用于不支持 IntersectionObserver 的旧浏览器。
• 缺点：性能较差，频繁触发滚动事件可能导致性能问题。
• 示例代码：

  function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(img => {
      const rect = img.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom >= 0) {
        img.src = img.dataset.src;
      }
    });
  }
  
  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  lazyLoad(); // 初始加载
  

3. 使用 loading="lazy" 属性

• 原理：HTML5 提供了 loading="lazy" 属性，浏览器会自动处理图片的懒加载。
• 优点：简单易用，无需编写额外的 JavaScript 代码。
• 缺点：兼容性有限，部分旧浏览器不支持。
• 示例代码：

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

4. 第三方库

• 原理：使用第三方库（如 lozad.js、lazysizes 等）来实现懒加载。
• 优点：功能丰富，支持多种懒加载场景（如图片、iframe 等），且通常有较好的兼容性和性能优化。
• 示例代码（使用 lozad.js）：

  <img class="lozad" data-src="image.jpg" alt="Lazy Loaded Image">
  <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
  <script>
    const observer = lozad('.lozad');
    observer.observe();
  </script>
  

5. CSS 背景图懒加载

• 原理：通过 CSS 的 background-image 属性结合 JavaScript 动态设置背景图。
• 优点：适用于需要懒加载背景图的场景。
• 示例代码：

  <div class="lazy-bg" data-bg="image.jpg"></div>
  <script>
    const lazyBgElements = document.querySelectorAll('.lazy-bg');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const bgElement = entry.target;
          bgElement.style.backgroundImage = `url(${bgElement.dataset.bg})`;
          observer.unobserve(bgElement);
        }
      });
    });
  
    lazyBgElements.forEach(el => observer.observe(el));
  </script>
  

6. 基于 srcset 和 sizes 的响应式图片懒加载

• 原理：结合 srcset 和 sizes 属性，根据设备屏幕大小加载不同分辨率的图片。
• 优点：适用于响应式设计，优化不同设备的图片加载。
• 示例代码：

  <img data-src="image-320w.jpg" data-srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" class="lazyload" alt="Responsive Lazy Loaded Image">
  <script>
    const images = document.querySelectorAll('img.lazyload');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.srcset = img.dataset.srcset;
          observer.unobserve(img);
        }
      });
    });
  
    images.forEach(img => observer.observe(img));
  </script>
  

总结

• 推荐使用 IntersectionObserver：现代浏览器中性能最佳，代码简洁。
• 兼容性考虑：对于旧浏览器，可以使用滚动事件监听或第三方库。
• 简单场景：可以直接使用 loading="lazy" 属性，但需注意兼容性。

根据项目需求和浏览器兼容性要求，选择合适的懒加载方式可以有效提升页面加载性能和用户体验。