小程序lazyload

小程序的lazyload可以实现图片的懒加载，提高页面的加载速度和用户的体验。具体实现方法如下：

1. 在wxml文件中，将需要懒加载的图片的src属性值设置为一个占位符，如"data-src"。

2. 在js文件中，通过页面滚动事件监听页面的滚动位置，当滚动到图片的位置时，将占位符的属性值替换为真实的图片地址。

代码示例：

在wxml文件中：

<view class="image-wrapper">
  <image class="lazy-load" data-src="{{item.imageUrl}}"></image>
</view>

在js文件中：

Page({
  data: {
    list: [
      { imageUrl: 'https://example.com/image1.jpg' },
      { imageUrl: 'https://example.com/image2.jpg' },
      { imageUrl: 'https://example.com/image3.jpg' },
      // ...
    ]
  },
  onShow: function () {
    const query = wx.createSelectorQuery()
    query.selectAll('.lazy-load').boundingClientRect()
    query.exec((res) => {
      res[0].forEach((rect, index) => {
        if (rect.top < wx.getSystemInfoSync().windowHeight) {
          const imageSrc = `list[${index}].imageUrl`
          this.setData({ [imageSrc]: this.data.list[index].dataSrc })
        }
      })
    })
  },
  onPageScroll: function (e) {
    this.setData({
      scrollTop: e.scrollTop
    })
    const query = wx.createSelectorQuery()
    query.selectAll('.lazy-load').boundingClientRect()
    query.exec((res) => {
      res[0].forEach((rect, index) => {
        if (rect.top < wx.getSystemInfoSync().windowHeight) {
          const imageSrc = `list[${index}].imageUrl`
          this.setData({ [imageSrc]: this.data.list[index].dataSrc })
        }
      })
    })
  }
})

这段代码中，onShow函数和onPageScroll函数都监听页面滚动事件，当滚动到图片位置时，将占位符的属性值替换为真实的图片地址，实现了图片的懒加载。