微信小程序实现图片预加载(图片延迟加载)

时间:2024-03-06 14:10:11

微信小程序实现图片预加载(图片延迟加载)

这几天搞百度小程序,对接的网站需要展示大量图片,并且图片都是高清图片,因为要同步支持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 class="p1_wrap4_item_pic" wx-if="{{itemName.loaded ? 0: 1}}">
<image class="jiazaitu" src="{{ itemName.tempthumb}}"></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}}",通过三目运算显示原图。