JavaScript之图片懒加载的实现

图片懒加载指的是在浏览过程中随着需要才被加载出来，例如某宝上面浏览商品时，会伴随很多的图片，如果一次全部加载出来的话，显然资源有些浪费，并且加载速度也会相对降低，那么懒加载的实现很重要。即随着浏览翻阅时，下面的图片才被加载出来，这样又不浪费带宽，访问网页速度也很快，用户体验也会有所提升。

说了这么多，其实所需要注意的要点有：

屏幕可视区域的高度
每张图片在文档中的高度
图片符合要求进行加载时，将图片地址赋值给属性 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练习时，不要一下将代码写完，每进行一步要对其进行测试一下，不然到最后哪里出现错误修改起来相对比较麻烦。