日期:2014-05-16 浏览次数:20392 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
初始图片<img src="http://www.iaechina.net.cn/images/logo.gif"/>
<div id="lazyBox" style="margin-top:100px;">
滚动才能看到图片
<img width="120" height="90" class="lazyImg" alt="http://www.iaechina.net.cn/images/logo.gif" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
<img width="120" height="90" class="lazyImg" alt="http://www.iaechina.net.cn/images/logo.gif" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/>
</div>
<div style="height:1000px;">
</div>
<script type="text/javascript">
var isShow=false;
$(window).bind("scroll",function(){
if(isShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if (t>500){
isShow=true;
$(".lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>