微信小程序實現圖片預加載（圖片延遲加載）

微信小程序實現圖片預加載（圖片延遲加載）

這幾天搞百度小程序，對接的網站需要展示大量圖片，並且圖片都是高清圖片，因為要同步支持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}}"，通過三目運算顯示原圖。