微信小程序实现图片预加载（图片延迟加载）详解手机开发

微信小程序实现图片预加载（图片延迟加载）

这几天搞百度小程序，对接的网站需要展示大量图片，并且图片都是高清图片，因为要同步支持pc和手机站，在开发者工具中测试的时候，图片都是瞬间加载，因此感觉不出什么，但是真机预览的时候，特别是4G情况下，会出现图片加载缓慢的情况，提交小程序审核，也被驳回，说是图片无法加载。

最初的方法是使用图片懒加载的方式，但是无论百度还是微信，都需要频繁去计算位置，需要频繁计算，感觉比较消耗内存，所以放弃，脚本51上有篇文章是通过检测节点的方式监控懒加载，没有试，有兴趣可以试一下：h

经过查看其它博客写的文章，采用预加载的方式，通过image自带的函数bindload来判断图片是否加载完成，默认加载一个小图，加载完成之后触发函数，替换为真实图片地址。

先ajax的图片列表进行处理下

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, 
         }) 
      },

wxml

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

</view>

       <view class='list_grid_tit'> {{item.title}}</view> 
</view>

用两个image标签，第一个设置隐藏，并通过判断是否加载完成，自动触发bindload=“imgOnload”。

2、定义imgOnload函数

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 
          }) 
      } 
  },

这样，当图片还没有加载完成的时候，显示你设置的临时图片，当加载完成时候，触发imgOnload函数，设置loaded = true，然后src=”{{item.loaded? item.thumb : item.tempthumb}}”，通过三目运算显示原图。

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/6227.html

微信小程序实现图片预加载（图片延迟加载）详解手机开发

相关推荐

发表回复