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>
