1. <thead id="8qdxw"></thead>

      返回舊版| 微信建站| 建站之家論壇| 我要建站 | 建站學習 | 加入收藏
      百度小程序當前位置:首頁 > cms教程 > 百度小程序 > 正文

      小程序實現圖片預加載(圖片延遲加載)

      發布時間:2018-12-04 22:31:34   來源:   點擊:
      這幾天搞百度小程序,對接的網站需要展示大量圖片,并且圖片都是高清圖片,因為要同步支持pc和手機站,在開發者工具中測試的時候,圖片都是瞬間加載,因此感覺不出什么,但是真機預覽的時候,特別是4G情況下,會出現圖片加載緩慢的情況,提交小程序審核,也被駁回,說是圖片無法加載。

      最初的方法是使用圖片懶加載的方式,但是無論百度還是微信,都需要頻繁去計算位置,需要頻繁計算,感覺比較消耗內存,所以放棄,腳本51上有篇文章是通過檢測節點的方式監控懶加載,沒有試,有興趣可以試一下:https://www.jb51.net/article/144018.htm

      經過查看其它博客寫的文章,采用預加載的方式,通過image自帶的函數bindload來判斷圖片是否加載完成,默認加載一個小圖,加載完成之后觸發函數,替換為真實圖片地址。具體實現如下(百度小程序):

      1、swml代碼:

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

      用兩個image標簽,第一個設置隱藏,并通過判斷是否加載完成,自動觸發binload=“imgOnload”。

      2、定義imgOnload函數

      1. imgOnLoad: function (e) { 
      2.    let that = this 
      3.    var realthumb = e.target.dataset.thumb; 
      4.    let list = that.data.list 
      5.    for (var i = 0; i < list.length; i++) { 
      6.    if (list[i].thumb == realthumb) { 
      7.     list[i].loaded = true 
      8.    } 
      9.    that.setData({ 
      10.     list: list 
      11.    }) 
      12.    } 
      13.   }, 

      3、處理信息列表的默認加載信息,默認loaded=false,設置臨時圖片地址tempthumb

      1. success: function (res) { 
      2.         var list = res.data; 
      3.         for (var i in list) { 
      4.             list[i].tempthumb= '../../images/nopic.jpg';//臨時圖片 
      5.             list[i].loaded = false
      6.          } 
      7.          that.setData({ 
      8.             list: list, 
      9.          }) 
      10.       }, 

      這樣,當圖片還沒有加載完成的時候,顯示你設置的臨時圖片,當加載完成時候,觸發imgOnload函數,設置loaded = true,然后src="{{item.loaded? item.thumb : item.tempthumb}}",通過三目運算顯示原圖。

      如有疑問,可留意一塊討論
      版權所有:鄭州騰石網絡科技有限公司 備案信息:豫ICP備18019117號
      站長QQ:2863868475 業務合作咨詢:15137100750(同微信)
      本站所有投放的廣告是有其他網站提供,不代表本站立場,同時網站首頁廣告位對外出租詳情咨詢本站站長!同時歡迎廣大站長加入個人建站團隊
      • 建站客服
      • CMS仿站
      • CMS學習
      • 技術交流群:336572814
      福彩开奖