圖片懶加載指的是在瀏覽過程中隨着需要才被加載出來，例如某寶上面瀏覽商品時，會伴隨很多的圖片，如果一次全部加載出來的話，顯然資源有些浪費，並且加載速度也會相對降低，那么懶加載的實現很重要。即隨着瀏覽翻閱時，下面的圖片才被加載出來，這樣又不浪費帶寬，訪問網頁速度也很快，用戶體驗也會有所提升。
說了這么多，其實所需要注意的要點有：
- 屏幕可視區域的高度
- 每張圖片在文檔中的高度
- 圖片符合要求進行加載時，將圖片地址賦值給屬性 src
- 對屏幕滾動事件進行監控
- 首次進入網頁未滑動屏幕時要顯示的圖片
代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圖片懶加載實現</title> 6 <style> 7 img{ 8 width: 300px; 9 } 10 </style> 11 </head> 12 <body> 13 <div> 14 <p><img src="" data-original="./Saved Pictures/shawu.jpg" /></p> 15 <p><img src="" data-original="./Saved Pictures/ass.jpg" /></p> 16 <p><img src="" data-original="./Saved Pictures/LmLm.jpg" /></p> 17 <p><img src="" data-original="./Saved Pictures/和服.jpg" /></p> 18 <p><img src="" data-original="./Saved Pictures/花亭.jpg" /></p> 19 <p><img src="" data-original="./Saved Pictures/康娜.jpg" /></p> 20 <p><img src="" data-original="./Saved Pictures/初音未來.jpg" /></p> 21 <p><img src="" data-original="./Saved Pictures/紅發少女.jpg" /></p> 22 <p><img src="" data-original="./Saved Pictures/shawu.jpg" /></p> 23 <p><img src="" data-original="./Saved Pictures/ass.jpg" /></p> 24 <p><img src="" data-original="./Saved Pictures/LmLm.jpg" /></p> 25 <p><img src="" data-original="./Saved Pictures/和服.jpg" /></p> 26 <p><img src="" data-original="./Saved Pictures/花亭.jpg" /></p> 27 <p><img src="" data-original="./Saved Pictures/康娜.jpg" /></p> 28 <p><img src="" data-original="./Saved Pictures/初音未來.jpg" /></p> 29 <p><img src="" data-original="./Saved Pictures/紅發少女.jpg" /></p> 30 <p><img src="" data-original="./Saved Pictures/shawu.jpg" /></p> 31 <p><img src="" data-original="./Saved Pictures/ass.jpg" /></p> 32 <p><img src="" data-original="./Saved Pictures/LmLm.jpg" /></p> 33 <p><img src="" data-original="./Saved Pictures/和服.jpg" /></p> 34 <p><img src="" data-original="./Saved Pictures/花亭.jpg" /></p> 35 <p><img src="" data-original="./Saved Pictures/康娜.jpg" /></p> 36 <p><img src="" data-original="./Saved Pictures/初音未來.jpg" /></p> 37 <p><img src="" data-original="./Saved Pictures/紅發少女.jpg" /></p> 38 39 </div> 40 <script src="jquery-3.2.1.slim.js"></script> 41 <script> 42 var wHeight=$(window).height(); //獲取屏幕可視高度 43 $('img').each(function () { //對圖片進行循環 44 var ownHeight=$(this).offset().top; //獲取當前圖片在文檔中的位置 45 if(ownHeight<=wHeight){ //如果當前圖片位置在屏幕可視范圍之內加載此圖片 46 $(this).attr('src',$(this).attr('data-original')); 47 } 48 }); 49 50 $(window).on('scroll',function(){ //添加屏幕滾動事件 51 $('img').each(function () { 52 var hasSorollTop=$(window).scrollTop(); //獲取屏幕已滾動高度 53 var ownHeight=$(this).offset().top; 54 if(ownHeight<=(hasSorollTop+wHeight+500)){ 55 //當圖片在屏幕滾動時，距離可視區域500像素時加載此圖片， 56 // 以保證查看此圖時，下面的一張以提前加載完成 57 $(this).attr('src',$(this).attr('data-original')); 58 } 59 }); 60 }); 61 </script> 62 </body> 63 </html>
在進行JavaScript練習時，不要一下將代碼寫完，每進行一步要對其進行測試一下，不然到最后哪里出現錯誤修改起來相對比較麻煩。
原創不易，尊重版權。轉載請注明出處：http://www.cnblogs.com/xsmile/