跳到主要内容

图片懒加载

介绍​

图片懒加载（Lazy Loading）是一种优化网页或小程序性能的技术。它的核心思想是延迟加载图片，只有当图片进入用户的可视区域时，才加载图片资源。这样可以减少页面初始加载时的请求数量，从而加快页面加载速度，节省带宽，并提升用户体验。

在小程序中，图片懒加载尤为重要，因为小程序通常运行在移动设备上，网络环境和设备性能可能有限。通过懒加载，可以有效减少不必要的资源消耗，提升小程序的流畅度。

为什么需要图片懒加载？​

  1. 提升页面加载速度：页面初始加载时，只加载用户可见区域的图片，减少请求数量。
  2. 节省带宽：避免加载用户可能不会查看的图片，减少流量消耗。
  3. 优化用户体验：减少页面卡顿，提升用户操作的流畅性。

实现图片懒加载的基本原理​

图片懒加载的核心原理是通过监听页面的滚动事件，判断图片是否进入可视区域。如果图片进入可视区域，则动态加载图片资源。

实现步骤​

  1. 占位符：在图片未加载时，使用占位符（如纯色背景或低分辨率图片）代替真实图片。
  2. 监听滚动事件：通过监听页面的滚动事件，判断图片是否进入可视区域。
  3. 动态加载图片：当图片进入可视区域时，将占位符替换为真实图片。

代码示例​

以下是一个简单的图片懒加载实现示例：

<img
  data-src="https://example.com/image.jpg"
  src="https://example.com/placeholder.jpg"
  class="lazy-load"
  alt="示例图片"
/>
document.addEventListener("scroll", function () {
  const lazyImages = document.querySelectorAll(".lazy-load");

  lazyImages.forEach((img) => {
    if (isInViewport(img)) {
      img.src = img.dataset.src;
      img.classList.remove("lazy-load");
    }
  });
});

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
备注

注意：在实际开发中，可以使用 IntersectionObserver API 来替代手动监听滚动事件，这种方式性能更好，代码也更简洁。

在小程序中实现图片懒加载​

小程序中可以通过 IntersectionObserver 来实现图片懒加载。以下是一个简单的示例：

Page({
  onLoad() {
    const observer = this.createIntersectionObserver();
    observer.relativeToViewport().observe(".lazy-load", (res) => {
      if (res.intersectionRatio > 0) {
        const img = res.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy-load");
      }
    });
  },
});
<image
  data-src="https://example.com/image.jpg"
  src="https://example.com/placeholder.jpg"
  class="lazy-load"
  mode="aspectFill"
/>
提示

提示：在小程序中，IntersectionObserver 是一个强大的工具，可以轻松实现懒加载、无限滚动等功能。

实际应用场景​

  1. 长列表中的图片加载：在电商小程序中，商品列表通常包含大量图片。通过懒加载，可以显著提升页面加载速度。
  2. 图片画廊：在图片画廊中，用户可能不会查看所有图片。懒加载可以避免一次性加载所有图片，节省资源。
  3. 新闻或博客文章：文章中的图片通常位于页面下方，用户可能不会立即查看。懒加载可以延迟加载这些图片，提升页面初始加载速度。

总结​

图片懒加载是一种简单但非常有效的优化技术，特别适合在小程序中使用。通过延迟加载图片，可以显著提升页面性能，优化用户体验。在实际开发中，可以使用 IntersectionObserver 来简化实现过程。

附加资源与练习​

  1. 练习：尝试在小程序中实现一个图片懒加载功能，并测试其性能提升效果。
  2. 进一步学习：了解 IntersectionObserver 的其他应用场景，如无限滚动、广告曝光统计等。
  3. 参考文档：