详解性能更优越的小程序图片懒加载方式

以下是"详解性能更优越的小程序图片懒加载方式"的完整攻略：

懒加载方式的原理

懒加载是指在页面滚动时才去加载对应的图片，这样能够减少页面的加载时间，提升用户体验。在小程序中，懒加载的原理是通过监听页面滚动事件，判断图片是否在可视区域内，如果是，则去加载对应的图片。

基本实现方式

小程序里的图片组件是<image>，我们可以通过绑定<scroll-view>的滚动事件实现图片懒加载。具体实现如下：

首先，在<scroll-view>元素中绑定bindscrolltolower事件，表示到达滚动到底部时触发。

<scroll-view bindscrolltolower="loadMoreData">
<!-- 图片列表 -->
</scroll-view>

然后，实现loadMoreData事件，事件内判断图片是否在可视区域内，如果是，则将图片的src属性改为实际图片地址。

loadMoreData: function () {
  var that = this;
  // 获取可视区域的高度和宽度
  wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function (res) {
    // 获取图片数组和当前已经加载的图片数量
    var imgs = that.data.imgs;
    var loadedCount = that.data.loadedCount;
    for (var i = loadedCount; i < imgs.length; i++) {
      // 如果图片在可视区域内，将图片的src改为实际的地址
      wx.createSelectorQuery().select('#img-' + i).boundingClientRect(function (rect) {
        if (rect.top < res.height) {
          imgs[i].src = imgs[i].realSrc;
        }
      }).exec();
    }
    // 更新已经加载的图片数量
    that.setData({
      loadedCount: i
    });
  }).exec();
}

优化方式

1. 图片数量限制

如果瀑布流或者列表中的图片过多，那么在滚动事件中大量计算图片的位置和状态，会对性能造成影响。因此可以设置一个图片数量的上限，这样就不会循环计算太多的图片，降低性能消耗。

wx.createSelectorQuery().selectViewport().scrollOffset(function (res) {
  var scrollTop = res.scrollTop;
  var screenHeight = wx.getSystemInfoSync().windowHeight;
  for (var i = loadedCount; i < imgs.length && i < 20; i++) {
    wx.createSelectorQuery().select("#img-" + i).boundingClientRect(function (rect) {
      if (rect.top + rect.height >= scrollTop && rect.top <= scrollTop + screenHeight) {
        imgs[i].src = imgs[i].realSrc
      }
    }).exec();
  }
  that.setData({
    loadedCount: i
  })
}).exec();

2. 节流方案

如果用户滚动过快，那么懒加载处理的图片数量和计算的次数会变多，对性能也是一种负担。因此可以采用节流方案，即限制事件的触发次数或者触发的时间间隔，这样就能够有效减少计算量和操作次数，提升性能。

var lazyLoad = function () {
  // 实现懒加载的逻辑代码...
}
var timer = null;
wx.createSelectorQuery().select("#scroll-view").fields({
  scrollOffset: true,
  size: true
}, function (res) {
  if (timer) clearTimeout(timer);
  timer = setTimeout(function () {
    var scrollTop = res.scrollTop;
    var screenHeight = wx.getSystemInfoSync().windowHeight;
    for (var i = loadedCount; i < imgs.length && i < 20; i++) {
      wx.createSelectorQuery().select("#img-" + i).boundingClientRect(function (rect) {
        if (rect.top + rect.height >= scrollTop && rect.top <= scrollTop + screenHeight) {
          imgs[i].src = imgs[i].realSrc
        }
      }).exec();
    }
    that.setData({
      loadedCount: i
    });
  }, 1000);
}).exec();

示例

示例一：瀑布流图片懒加载

<scroll-view id="scroll-view" scroll-y="true" bindscrolltolower="loadMoreData">
  <view class="waterfall">
    <view wx:for="{{imgs}}" wx:key="{{item.src}}" class="waterfall-item">
      <image id="{{'img-' + index}}" class="waterfall-img" mode="aspectFill" src="{{item.src}}"></image>
    </view>
  </view>
</scroll-view>

Page({

  data: {
    imgs: [], // 图片数组
    loadedCount: 0 // 已经加载的图片数量
  },

  onLoad: function () {
    // 初始化图片数组
    var imgs = [];
    for (var i = 1; i <= 30; i++) {
      imgs.push({
        src: '../../images/' + i + '.jpg',
        realSrc: '../../images/' + i + '.jpg'
      });
    }
    this.setData({
      imgs: imgs
    });
  },

  loadMoreData: function () {
    var that = this;
    wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function (res) {
      var imgs = that.data.imgs;
      var loadedCount = that.data.loadedCount;
      for (var i = loadedCount; i < imgs.length && i < 20; i++) {
        wx.createSelectorQuery().select("#img-" + i).boundingClientRect(function (rect) {
          if (rect.top + rect.height >= res.top && rect.top <= res.bottom) {
            imgs[i].src = imgs[i].realSrc
          }
        }).exec();
      }
      that.setData({
        loadedCount: i
      });
    }).exec();
  }

})

示例二：图片列表懒加载

<scroll-view id="scroll-view" scroll-y="true" bindscrolltolower="loadMoreData">
  <view wx:for="{{imgs}}" wx:key="{{item.src}}" class="img-wrap">
    <image id="{{'img-' + index}}" class="img" mode="aspectFill" src="/images/placeholder.png"></image>
  </view>
</scroll-view>

Page({

  data: {
    imgs: [], // 图片数组
    loadedCount: 0 // 已经加载的图片数量
  },

  onLoad: function () {
    // 初始化图片数组
    var imgs = [];
    for (var i = 1; i <= 30; i++) {
      imgs.push({
        src: '../../images/' + i + '.jpg',
        realSrc: '../../images/' + i + '.jpg'
      });
    }
    this.setData({
      imgs: imgs
    });
  },

  loadMoreData: function () {
    var that = this;
    wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function (res) {
      var imgs = that.data.imgs;
      var loadedCount = that.data.loadedCount;
      for (var i = loadedCount; i < imgs.length && i < 20; i++) {
        wx.createSelectorQuery().select("#img-" + i).boundingClientRect(function (rect) {
          if (rect.top + rect.height >= res.top && rect.top <= res.bottom) {
            imgs[i].src = imgs[i].realSrc
          }
        }).exec();
      }
      that.setData({
        loadedCount: i
      });
    }).exec();
  }

})