微信小程序图片懒加载 微信小程序图片懒加载怎么回事

微信小程序的图片懒加载是指在用户滚动页面时，图片只在接近视口时才开始加载，这样可以减少首屏加载时间，提高用户体验，实现图片懒加载的方法有多种，以下是一些常见的实现方式：

1. 使用微信小程序原生的lazy-load属性

微信小程序提供了lazy-load属性，可以直接在image组件上使用，实现图片的懒加载。

<image lazy-load src="图片地址"></image>

2. 使用wx.createIntersectionObserver API

微信小程序提供了wx.createIntersectionObserver API，可以自定义触发图片加载的条件。

Page({
  onLoad: function() {
    this.intersectionObserver = wx.createIntersectionObserver(this);
    this.intersectionObserver.relativeToViewport({ bottom: 100 }).observe('.some-image', (res) => {
      if (res.intersectionRatio > 0) {
        this.setData({
          [imageList[${res.index}].loaded]: true
        });
      }
    });
  }
});

在.wxml文件中，你可以使用数据绑定来动态设置图片的src：

<image wx:for="{{imageList}}" wx:key="index" style="opacity:{{item.loaded ? 1 : 0}}" data-index="{{index}}" bindtap="loadImage" mode="aspectFill"></image>

然后在.js文件中实现loadImage方法：

Page({
  loadImage: function(e) {
    const index = e.currentTarget.dataset.index;
    const imageList = this.data.imageList;
    const currentImage = imageList[index];
    if (!currentImage.loaded) {
      currentImage.loaded = true;
      this.setData({
        [imageList[${index}]]: currentImage
      });
    }
  }
});

3. 使用第三方库

也有一些第三方库提供了懒加载的功能，例如wx-lazy-load，你可以通过npm安装或者直接下载库文件到你的项目中。

4. 自定义懒加载逻辑

如果你需要更复杂的懒加载逻辑，比如根据图片的尺寸、用户的滚动速度等因素来决定是否加载图片，你可能需要自定义懒加载逻辑。

Page({
  data: {
    threshold: 0.1, // 预加载的区域比例
    checkInterval: 50, // 检测的时间间隔
  },
  onLoad: function() {
    this.checkImages();
  },
  checkImages: function() {
    setInterval(() => {
      const query = wx.createSelectorQuery();
      query.selectAll('.lazy-load').boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((res) => {
        res[0].forEach((item, index) => {
          const scrollY = res[1][0].scrollTop;
          const windowHeight = wx.getSystemInfoSync().windowHeight;
          const elementTop = item.top;
          const elementBottom = item.bottom;
          if (scrollY > elementTop - windowHeight * this.data.threshold && scrollY < elementBottom) {
            const imgSrc = this.data.imageList[index].lazySrc;
            this.setData({
              [imageList[${index}].src]: imgSrc,
              [imageList[${index}].lazySrc]: ''
            });
          }
        });
      });
    }, this.data.checkInterval);
  }
});

在.wxml文件中，你可以使用lazy-load类来标记需要懒加载的图片：

<image wx:for="{{imageList}}" wx:key="index" class="lazy-load" src="{{item.src}}" mode="aspectFill"></image>

注意事项

- 懒加载可能会增加页面的复杂度，需要合理使用。

- 懒加载的图片在首次加载时可能会有短暂的空白，可以通过占位图或者骨架屏来改善用户体验。

- 懒加载的实现需要考虑页面的刷新和滚动回退的情况，确保图片加载的逻辑正确。

通过以上方法，你可以实现微信小程序的图片懒加载功能，提升小程序的性能和用户体验。