如何在小程序實現圖片lazy-load懶加載效果

        自從跳一跳出現以後小程序又開始頻繁出現了，在學習過程當中發現小程序雖然好可是因爲api不完善致使開發過程當中有不少的坑，重點是網上相對小程序出現坑時解決方案顯然比較少，小程序最讓人以爲痛心疾首之一就是沒法引入插件，不少插件功能都只能本身寫，這就使人尷尬了。好比圖片懶加載，在vue裏就有vue-lazyload插件，直接一條代碼完事了，而這裏只能本身寫了，好了說正事兒，先看效果：

                                             

        思路是這樣的：圖片列表展現數據是一個數組，在後臺請求回來數據時咱們定義一個和圖片列表數組長度同樣的數組arr，裏面的元素都是布爾值false；再定義一個數組arrHeight用於存放每一個圖片相對於頂部的高度值。經過滾動監聽每一個圖片高度值是否小於滾動條高度，從而改變數值arr裏對應的布爾值。而後頁面的image組件經過對src設置三目運算來判斷是展現默認圖片仍是實際圖片。

        裏面涉及到的api我就不詳說了，能夠去小程序開發文檔查具體用法。如下是具體代碼：

 

html代碼：

js代碼：

  

        注：第28行的延時其實是等待image組件加載圖片而後初始化獲取單個圖片高度，image組件有一個bindload屬性，可是這個屬性是有一個圖片加載就會執行一次，在這裏作獲取就會獲取N次，不利於性能優化; 

            第50行的i/2是由於每行有兩張圖片，這兩張的高度是同樣的，因此Math.floor(i / 2)，加10是我上下圖片之間的margin值;

            第57行 若是不加上  app.globalData.windowHeight 那效果就是一滾動加載的不是底部的兩張圖片而是頂部的兩張圖片，你們能夠試一下效果;

            

在此圖片懶加載效果已實現，這裏並非滾動到了某張圖片的位置而後向後臺請求圖片數據再加載出來，其實本質上圖片早就已經所有加載了，只是經過滾動到位置再顯示，達到懶加載的效果，但願能對大家有所幫助。

 

 

 

        如需轉載請註明出處： http://www.cnblogs.com/zishang91/p/8507485.html，以便有錯誤能夠及時修改，如有錯漏不足之處，請見諒而且指點，謝謝！！！