图片懒加载实现

图片懒加载是通过延迟加载页面上的图片直到这些图片即将进入浏览器窗口（即用户滚动到它们附近时）才开始加载。这样可以显著减少初始加载时间和总下载数据量，提高用户体验。

---

• 使用原生的 loading 属性

HTML5 提供了一个非常简单的原生方法来实现懒加载，只需在 img 标签中添加 loading="lazy" 属性：

<img src="example.jpg" loading="lazy" alt="example">

• 使用 JavaScript (Intersection Observer API)

  Intersection Observer API 提供了一种方式，可以异步观察目标元素与其祖先元素或顶级文档视窗(viewport)的交叉状态。这是实现懒加载的一种更灵活的方法：

document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll('img[loading="lazy"]');
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        imageObserver.unobserve(image);
      }
    });
  });

  images.forEach(image => {
    imageObserver.observe(image);
  });
});

在这个例子中，你需要在 `img` 标签中使用 `data-src` 来代替 `src`，这样图片在初始时不会被加载。

• 使用第三方库

还有许多第三方JavaScript库可以帮助实现懒加载，如 lozad.js, lazysizes 等。这些库通常提供更多的功能和更好的浏览器兼容性。使用这些库通常只需要引入库文件并进行简单配置。

<!-- 例如，使用 `lazysizes` -->

<script src="path_to_lazysizes.js" async></script>

<!-- 然后在 `img` 标签中使用类 `lazyload` 和 `data-src` -->

<img data-src="example.jpg" class="lazyload" alt="example">

懒加载不仅可以用于图片，还可以用于视频、iframe等其他需要大量数据加载的元素。正确实现懒加载可以显著提高页面性能，尤其是在移动设备和网络条件较差的环境中。