什么是懒加载？小程序中图片懒加载的两种实现方法

懒加载（Lazy Loading）是一种在网页或应用程序中优化网页加载速度的技术。当我们加载一个页面时，通常会将页面中所有的内容，包括图片、视频等全部加载出来，这样就会使页面加载速度变得很慢，用户体验不佳。而懒加载则是将这些内容分块加载，只有当用户滚动到需要展示的部分时才会进行加载，这样可以加快页面的加载速度，提高用户的体验。

在小程序中，图片懒加载也是一种常用的优化方式。小程序中的图片懒加载有两种实现方式。下面我们将一一介绍。

一、IntersectionObserver实现懒加载

Intersection Observer是浏览器原生提供的一个API，它可以监听元素与文档顶部或浏览器可视区域的交叉状态。利用这个特性，我们可以很方便地实现图片的懒加载。

1. 简单实现

下面是一个简单的IntersectionObserver实现懒加载的例子。首先，我们将需要懒加载的图片的src属性值设置为一个小图片，然后给图片元素设置一个data-src属性，将真实的图片路径放在该属性中。接着，我们创建一个IntersectionObserver对象，将需要懒加载的图片的父容器传入，监听图片与文档顶部或浏览器可视区域的交叉状态。当图片与文档顶部或浏览器可视区域交叉时，我们将img元素的src属性设置为其data-src属性的值即可。

// 获取所有需要懒加载的图片
const imgs = document.querySelectorAll('.lazyload');
// 创建IntersectionObserver对象
const observer = new IntersectionObserver((entries) => {
  // 遍历交叉状态集合
  entries.forEach((entry) => {
    // 如果图片与文档顶部或浏览器可视区域交叉，加载图片
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      // 取消监听该图片
      observer.unobserve(img);
    }
  })
});
// 遍历所有需要懒加载的图片，监听其交叉状态
imgs.forEach((img) => {
  observer.observe(img);
});

2. 实现图片淡入效果

上面的例子中，当图片进入到视图时，图片会突然出现，这并不美观。为了实现图片淡入效果，我们可以为需要懒加载的图片设置一个opacity为0的样式，当图片进入到视图时，我们将图片的opacity渐变到1即可。

// 获取所有需要懒加载的图片
const imgs = document.querySelectorAll('.lazyload');
// 创建IntersectionObserver对象
const observer = new IntersectionObserver((entries) => {
  // 遍历交叉状态集合
  entries.forEach((entry) => {
    // 如果图片与文档顶部或浏览器可视区域交叉，加载图片并实现淡入效果
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.onload = () => {
        img.style.opacity = 1;
      };
      // 取消监听该图片
      observer.unobserve(img);
    }
  })
});
// 遍历所有需要懒加载的图片，监听其交叉状态
imgs.forEach((img) => {
  img.style.opacity = 0;
  observer.observe(img);
});

二、onReachBottom实现懒加载

小程序中还可以使用onReachBottom接口实现懒加载。onReachBottom是小程序提供的一个页面滚动到底部时触发的事件，我们可以在该接口中进行懒加载的操作。

1. 简单实现

下面是一个简单的onReachBottom实现懒加载的例子。首先，我们在页面中定义需要懒加载的图片，将img元素的src属性值设置为一个小图片，将真实的图片路径放在data-src属性中。接着，在onReachBottom接口中获取到需要懒加载的图片，当用户滚动到图片所在的区域时，将img元素的src属性设置为data-src属性的值即可。

// 监听页面滚动到底部事件
wx.onReachBottom(() => {
  // 获取需要懒加载的图片
  const imgs = document.querySelectorAll('.lazyload');
  // 遍历需要懒加载的图片
  imgs.forEach((img) => {
    // 如果图片未加载，且用户滚动到其所在区域，加载图片
    if (!img.src && img.getBoundingClientRect().top < wx.getSystemInfoSync().windowHeight) {
      img.src = img.dataset.src;
    }
  })
});

2. 实现图片渐进加载效果

为了让懒加载的效果更加美观，我们可以采用渐进加载的方式，让图片在页面中逐渐展示。具体实现方式为，在图片加载完成后，利用CSS动画实现图片的渐进加载效果。

// 监听页面滚动到底部事件
wx.onReachBottom(() => {
  // 获取需要懒加载的图片
  const imgs = document.querySelectorAll('.lazyload');
  // 遍历需要懒加载的图片
  imgs.forEach((img) => {
    // 如果图片未加载，且用户滚动到其所在区域，加载图片，实现渐进加载效果
    if (!img.src && img.getBoundingClientRect().top < wx.getSystemInfoSync().windowHeight) {
      img.width = img.offsetWidth;
      img.src = img.dataset.src;
      img.onload = () => {
        img.classList.add('fade-in'); // 使用CSS动画实现渐进加载效果
      };
    }
  })
});

通过上面的两种方式，我们可以实现小程序中图片的懒加载，提高小程序的加载速度，改善用户的体验。