前段時間看了京東大牛分享的前端技術，其中就有一個圖片懶加載的內容。然后自己試了試，感覺挺好的。

為什么要懶加載（延遲）：對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面未出現在可視區域內的圖片先不做加載，等到滾動到可視區域后再去加載。這樣子對于頁面加載性能上會有很大的提升，也提高了用戶的體驗。

實現的原理：實現的原理其實很簡單，在頁面載入的時候將頁面上的img標簽的src指向一個小圖片，把真實地址存放在一個自定義屬性中，這里我使用data-src來存放，如下：<img src="loading.gif"data-src="http://xxx.ooo.com"/>

然后將頁面img標簽獲取并保存，開啟一個定時器，遍歷保存的img標簽，判斷其位置是否出現在了可視區域，如果出現在可視區域了那么就把真實的src地址給賦值上。并且從數組中刪除，避免重復判斷。如何判斷是否出現在可視區域內呢？你可以獲取當前img的相對于文檔頂的偏移距離減去scrollTop的距離，然后和瀏覽器窗口的高度進行比較，如果小于瀏覽器窗口則出現在了可視區域內了，反之，則沒有。

在html中

<img src="image/loading.gif" data-src="http://image6.huangye88.com/2013/03/28/2a569ac6dbab1216.jpg">

在js中實現的代碼：

$(function(){$(window).scroll(function() {array = $("img");$("img").each(function () {if ( ( $(this).offset().top - $(document).scrollTop()) < $(window).height() ){$(this).attr('src',$(this).attr('data-src'));array.splice($(this),1);}})}) })

這樣就好了 推薦適用于移動端頁面的使用

轉載于:https://www.cnblogs.com/maxiaodan/p/5355098.html

總結

以上是生活随笔為你收集整理的图片懒加载小小心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。