Js圖片懶載入(lazyload)

weixin_33866037發表於2018-07-26

懶載入的作用和原理:

在我們展示多圖片的場景下,類似淘寶或者百度圖片,由於圖片的數目過多,全部從伺服器請求會給使用者糟糕的使用者體驗, 為了提升使用者體驗,我們這裡使用懶載入,隨著下拉逐步載入。

每個圖片的src會有一個get請求,我們把不能看到的圖片src設定為相同的圖片,這些圖片發一次請求即可,設定屬性data-src為真正的圖片路徑。當圖片滾動到可視區,我們就用js把data-src 賦值給 src,簡單的懶載入就可以實現了。


4452158-cf74b325b38fe515.png

為了提高體驗,新增節流函式,避免頻繁滾動滑鼠下拉頁面時連續不間斷呼叫函式。

4452158-db6abae70249c61f.png

相關文章