<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>layImg</title> <style> *{ margin:0; padding:0;} img{ display:block; width:200px; height:200px; background:#F6C} </style> </head> <body> <img _src="0.png" /> <img _src="1.png" /> <img _src="2.png" /> <img _src="3.png" /> <img _src="4.png" /> <img _src="5.png" /> <img _src="6.png" /> <img _src="7.png" /> <img _src="8.png" /> <img _src="9.png" /> <img _src="10.png" /> <img _src="11.png" /> </body> </html> <script type="text/javascript"> window.onload=function(){ var scrTop=document.documentElement.scrollTop||document.body.scrollTop; var cHeight=document.documentElement.clientHeight; var cha =cHeight+scrTop; var aImg=document.getElementsByTagName("img"); for(var i=0;i<aImg.length;i++){ if(!aImg[i].getAttribute("src")){ if(aImg[i].offsetTop<=cha){ var src=aImg[i].getAttribute("_src"); aImg[i].setAttribute("src",src) } } } window.onscroll=function(){ var scrTop=document.documentElement.scrollTop||document.body.scrollTop; var cha =cHeight+scrTop; for(var i=0;i<aImg.length;i++){ if(!aImg[i].getAttribute("src")){ if(aImg[i].offsetTop<=cha){ var src=aImg[i].getAttribute("_src"); aImg[i].setAttribute("src",src) } } } } } </script>
原理很简单，滚动条的高度值和每一个没有src属性的图片的高度比较，但是这样一玩的话，图片的高度就得写死了，不然图片没有高度还求什么，其实还有bug的，例如，假如img在一个相对定位的div里面的话，它的offsetTop就是很小的，这样就会在不需求加载的时候加载了，这样问题其实是出在offsetTop上面的，明天写个方法，替换了它，名字就叫topToBody，呵呵