图片按需加载实现

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>按需加载图片</title>
 6     <style type="text/css">
 7     * {
 8         margin: 0;
 9         padding: 0;
10     }
11     ul{
12     }
13     img{
14         width: 1000px;
15         height:700px;
16         display: block;
17     }
18     </style>
19 </head>
20 <body>
21     <div class="container">
22         <ul>
23             <li><a href=""><img src="" date-src="img/IMG_20130916_172507.jpg" alt=""></a></li>
24             <li><a href=""><img src="" date-src="img/8.jpg" alt=""></a></li>
25             <li><a href=""><img src="" date-src="img/3.jpg" alt=""></a></li>
26             <li><a href=""><img src="" date-src="img/4.jpg" alt=""></a></li>
27             <li><a href=""><img src="" date-src="img/5.jpg" alt=""></a></li>
28             <li><a href=""><img src="" date-src="img/6.jpg" alt=""></a></li>
29             <li><a href=""><img src="" date-src="img/7.jpg" alt=""></a></li>
30             <li><a href=""><img src="" date-src="img/8.jpg" alt=""></a></li>
31             <li><a href=""><img src="" date-src="img/IMG_20130916_172507.jpg" alt=""></a></li>
32             <li><a href=""><img src="" date-src="img/IMG_20130916_172507.jpg" alt=""></a></li>
33         </ul>
34         <button class="demo">点击我</button>
35     </div>
36     <script type="text/javascript">
37         ;(function(w,d){
38         var domimg = d.getElementsByTagName('img');
39 
40         window.addEventListener('scroll',function(){
41             for (var i = 0; i < domimg.length; i++) {
42                 (function(i){
43                     //domimg[i].offsetTop:图片距离document顶部的距离，包括卷去的高度，每个图片的这个高度都是固定的
44                     //document.documentElement.clientHeight：浏览器的高度
45                     //document.body.scrollTop：被卷去的高度。因为pageYOffset有兼容性问题
46                     if(domimg[i].offsetTop-document.documentElement.clientHeight<=document.body.scrollTop){
47                     domimg[i].src = domimg[i].getAttribute('date-src'); 
48                 }
49                 })(i);
50             };
51         },false);
52     })(window,document)
53     </script>
54 </body>
55 </html>

 

posted @ 2015-12-26 17:36  黑客PK  阅读(242)  评论(0)    收藏  举报