图片懒加载指的是在浏览过程中随着需要才被加载出来，例如某宝上面浏览商品时，会伴随很多的图片，如果一次全部加载出来的话，显然资源有些浪费，并且加载速度也会相对降低，那么懒加载的实现很重要。即随着浏览翻阅时，下面的图片才被加载出来，这样又不浪费带宽，访问网页速度也很快，用户体验也会有所提升。
说了这么多，其实所需要注意的要点有：
- 屏幕可视区域的高度
- 每张图片在文档中的高度
- 图片符合要求进行加载时，将图片地址赋值给属性 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练习时，不要一下将代码写完，每进行一步要对其进行测试一下，不然到最后哪里出现错误修改起来相对比较麻烦。