<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片延迟加载</title>
<style>
img{display:block;350px;height:245px;background:url(data/attachment/album/201412/18/090710jlau0l5c0bauwv56.gif) center center no-repeat}
</style>
</head>
<body>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://www.w3cfuns.com/data/attachment/album/201412/03/175356aihy3bhra3rhilqb.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<img src="" alt="" data-url="http://img3.imgtn.bdimg.com/it/u=2751590657,1001259472&fm=90&gp=0.jpg" class="test"><br>
<script type="text/javascript">
var obj=document.getElementsByClassName("test"),i,t,h,timer;
for(i=0;i<obj.length;i++){
obj[i].url=obj[i].getAttribute("data-url");
obj[i].o=obj[i].offsetTop;
obj[i].again=false; //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；
}
h=document.documentElement.clientHeight||900;
var test= function(obj){
t=document.body.scrollTop || document.documentElement.scrollTop;
if(t+h>obj.o&&obj.o>t){
obj.src=obj.url;
obj.again=true;
}
}
window.onscroll=window.onload=function(){
clearTimeout(timer);
timer=setTimeout(function(){
for(i=0;i<obj.length;i++){
if(!obj[i].again){
test(obj[i]);
}
}
},500)
};
</script>
</body>
</html>