举例说明图片懒加载的方案有哪些？

图片懒加载的方案有很多，以下列举几种常见的方案，并分别解释其原理和优缺点：

1. 基于 Intersection Observer API 的方案:

原理: 利用 Intersection Observer API 监听目标元素是否进入视口（viewport）。当目标元素进入视口时，触发回调函数，将图片的真实 src 或 srcset 属性赋值，从而加载图片。
代码示例:

const images = document.querySelectorAll('img.lazy');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // data-src 存储图片真实地址
      img.onload = () => {
        img.classList.remove('lazy'); // 可选：移除懒加载类名
      };
      observer.unobserve(img); // 停止观察已加载的图片
    }
  });
}, {
  rootMargin: '0px 0px 50px 0px' // 可选：提前加载，例如在元素距离视口 50px 时就开始加载
});

images.forEach(img => {
  observer.observe(img);
});

// HTML 结构示例
//<img class="lazy" data-src="image.jpg" src="placeholder.jpg" alt="My Image">

优点: 性能优秀，兼容性好，API 简洁易用。
缺点: 需要一定的 JavaScript 代码实现。

2. 基于 scroll 事件监听的方案 (不推荐):

原理: 监听页面的 scroll 事件，在事件回调函数中计算每个图片的位置，判断其是否进入视口。如果进入视口，则加载图片。
缺点: 性能较差，scroll 事件触发频率很高，频繁计算位置和判断会导致页面卡顿。不推荐使用。

3. 使用 <picture> 元素和 srcset 属性结合 sizes 属性:

原理: 利用 <picture> 元素和 srcset 属性，浏览器会根据当前视口大小和网络状况选择最合适的图片加载。 sizes 属性定义了不同视口宽度下图片所占的宽度，浏览器会根据这个信息选择合适的图片源。
代码示例:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="My Image">
</picture>

优点: 浏览器原生支持，无需 JavaScript 代码。可以根据不同的屏幕大小和网络状况加载不同的图片，提升用户体验。
缺点: 不能实现真正的懒加载，只是根据视口大小选择合适的图片。

4. 使用 JavaScript 插件:

原理: 一些 JavaScript 插件封装了懒加载的逻辑，例如 lazysizes、lozad.js 等。这些插件通常使用 Intersection Observer API 或其他技术实现懒加载。
优点: 使用方便，功能丰富，通常性能优化较好。
缺点: 需要引入额外的 JavaScript 文件。