关于微信小程序自己实现图片懒加载

前言

大部分图片懒加载的方案无非就是在当图片进入可视区的时候就把图片的src属性修改为正确的地址，由于微信小程序无法操作dom，所以可以使用微信小程序提供的 # createIntersectionObserver方法来监听图片是否到达了可视区，然后通过设置data来修改图片的src，这个方法和浏览器提供的IntersectionObserver有些类似，这个图片懒加载的办法也是学习的h5中图片懒加载开发。

实现

  data: {
    // 假定这是后端返回的信息数组，数组里面可以是图片数组
    imgArr: Array(50).fill({
      "data-src": "https://p3-passport.byteimg.com/img/user-avatar/da52bb6217a827fa744b2755676bbb2b~64x64.awebp",
      src: ''
    }),
  },
  // 监听函数
  imgLazyLoad() {
    this.data.imgArr.forEach((_, index) => {
      const observer = wx.createIntersectionObserver(this).relativeToViewport();
      observer.observe(".img-item-" + index, (res) => {
        const newImgArr = [...this.data.imgArr];
        newImgArr[index].src = newImgArr[index]["data-src"]
        if (res.intersectionRatio > 0) {
          console.log("加载图片index:", index);
          this.setData({ imgArr: newImgArr })
          observer.disconnect();
        }
      })
    })
  },
  onReady(){
      this.imgLazyLoad()
  }

结语

微信小程序和各种UI框架都是自带图片懒加载的，所以这个实现方法的意义更多是学习。