<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com"> <meta name="copyright" content="智能社 - zhinengshe.com"> <title>智能社 - www.zhinengshe.com</title> <style> * { margin:0; padding:0; } li { float:left; 310px; height:310px; border:1px solid red; list-style:none; margin:5px; } </style> <script> window.onload=window.onresize=window.onscroll=function (){ var aImg=document.getElementsByTagName('img'); var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; var scrollBottom=document.documentElement.clientHeight+scrollTop;//可是区域高度+滚动高度 for (var i=0; i<aImg.length; i++) { var top=getPos(aImg[i]).top; if (top<scrollBottom) { // 图片在可视区内 aImg[i].src=aImg[i].getAttribute('_src'); } } }; function getPos(obj){ var l= 0; var t= 0; while(obj){ l += obj.offseLeft; t += obj.offsetTop; obj = obj.offseParent; } return {left:l,top:t}; } </script> </head> <body> <ul> <li><img _src="images/m1.jpg" /></li> <li><img _src="images/m2.jpg" /></li> <li><img _src="images/m3.jpg" /></li> <li><img _src="images/m4.jpg" /></li> <li><img _src="images/m5.jpg" /></li> <li><img _src="images/m6.jpg" /></li> <li><img _src="images/m7.jpg" /></li> <li><img _src="images/m8.jpg" /></li> <li><img _src="images/m9.jpg" /></li> <li><img _src="images/m10.jpg" /></li> </ul> </body> </html>