记录关于在微信小程序里图片加载速度优化的几种思路

第一种：使用lazy-load属性; 

直接在image标签上加lazy-load;

lazy-load说明： 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

<image lazy-load alt="" src="/>

其实这个属性我也没看出有啥效果;有了解的朋友望评论一下；

想要了解更清的话可以看下这位大佬的juejin.cn/post/684490…

第二种：雪碧图（在图片小的情况下可以用）

把图片合成一张雪碧图;通过background-position来找到自己想要的图片

background-position：-xpx -ypx;

第三种：使用wx.getImageInfo(Object object)

这个api用来获取图片的信息，网络图片需先配置download域名才能生效

具体的思路呢，就是把服务端返回的图片网络路径转成本地的路径;本地的图片渲染总比网络的路径渲染快吧;用于少量的图片还好

wx.getImageInfo({    src:'',    success:res=>{            }})

第四种：预加载

具体实现方式：通过image自带的函数bindload来判断图片是否加载完成，默认加载一个小图，加载完成之后触发函数，替换为真实图片地址

<view class='list_gridli' bindtap='show_detail'>
       <image src="{{item.thumb}}" mode="aspectFill" data-thumb="{{item.thumb}}" bindload="imgOnLoad" style="display:none"></image>
       <image src="{{item.loaded ? item.thumb : item.tempthumb}}" mode="aspectFill"></image>
       <view class='list_grid_tit'> {{item.title}}</view>
</view>

imgOnLoad: function (e) {
      let that = this;
	  var realthumb = e.target.dataset.thumb;
	  let list = that.data.list
	  for (var i = 0; i < list.length; i++) {
	      if (list[i].thumb == realthumb) {
		      list[i].loaded = true
	      }
	      that.setData({
		      list: list
	      })
	  }
  }

处理下服务端返回的数据

success: function (res) {
        var list = res.data;
        for (var i in list) {
            list[i].tempthumb= '../../images/nopic.jpg';//临时图片
            list[i].loaded = false;
         }
         that.setData({
            list: list,
         })
}

第五种：使用webp格式的图片

把图片转成webp格式，然后在image标签上设置webp属性

<image webp alt="" src="/>

当然这几种嘞，只是提供思路然后我在网上找的一些解决方案，具体的话还是得实践下；上面的方案有所不足的还请评论指明下，谢谢各位