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>