62,041
社区成员
发帖
与我相关
我的任务
分享
<!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>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="height: 600px;">
高度设置高一点 <span id="sp1" style="font-size: large; font-weight: bold; color: Red;"></span>
</div>
能看的见到图片 :
<div id="lazyBox">
<img class="lazyImg" src="0958f79f-14c3-4784-8a41-e8895365a7ad.jpg" />
<img class="lazyImg" src="10d27bba-7198-4c7c-951f-dd492681c2d5.jpg" />
<img class="lazyImg" src="38bb8a0c-cc42-4759-a9b5-439992eb016e.jpg" />
<img class="lazyImg" src="44a95e99-efaf-4042-a9a9-bc886cc113ba.jpg" />
<img class="lazyImg" src="5f5ae7da-13f5-4649-8500-248f41cc44d0.jpg" />
</div>
<br />
<br />
<br />
<br />
一开始看不到的图片:
<div id="lazyBox1">
<img class="lazyImg" src="loading1.gif" alt="70c7a31f-891b-4b6a-80eb-7c2c61198b65.jpg" />
<img class="lazyImg" src="loading1.gif" alt="784ed21e-cacd-4e8a-8a02-82d79c18666b.jpg" />
<img class="lazyImg" src="loading1.gif" alt="88d6ee07-5065-43ee-9c48-bc86c26df462.jpg" />
<img class="lazyImg" src="loading1.gif" alt="a2a18d20-3e6c-44f0-b25d-e8268e56cbbe.jpg" />
<img class="lazyImg" src="loading1.gif" alt="b06d6e3d-71a9-46c3-924d-f9d09d398901.jpg" />
</div>
<br />
<br />
<br />
<br />
<div id="lazyBox2">
<img class="lazyImg" src="loading1.gif" alt="70c7a31f-891b-4b6a-80eb-7c2c61198b65.jpg" />
<img class="lazyImg" src="loading1.gif" alt="784ed21e-cacd-4e8a-8a02-82d79c18666b.jpg" />
<img class="lazyImg" src="loading1.gif" alt="88d6ee07-5065-43ee-9c48-bc86c26df462.jpg" />
<img class="lazyImg" src="loading1.gif" alt="a2a18d20-3e6c-44f0-b25d-e8268e56cbbe.jpg" />
<img class="lazyImg" src="loading1.gif" alt="b06d6e3d-71a9-46c3-924d-f9d09d398901.jpg" />
</div>
<br />
<br />
<br />
<br />
<div id="lazyBox3">
<img class="lazyImg" src="loading1.gif" alt="70c7a31f-891b-4b6a-80eb-7c2c61198b65.jpg" />
<img class="lazyImg" src="loading1.gif" alt="784ed21e-cacd-4e8a-8a02-82d79c18666b.jpg" />
<img class="lazyImg" src="loading1.gif" alt="88d6ee07-5065-43ee-9c48-bc86c26df462.jpg" />
<img class="lazyImg" src="loading1.gif" alt="a2a18d20-3e6c-44f0-b25d-e8268e56cbbe.jpg" />
<img class="lazyImg" src="loading1.gif" alt="b06d6e3d-71a9-46c3-924d-f9d09d398901.jpg" />
</div>
<script type="text/javascript">
//4行数据做例子 第一条数据在用户的实现范围内,直接是显示的,后3行数据图片暂时不加载
var hasShow1=false;//第一条数据是否加载
var hasShow2=false;//第二条
var hasShow3=false;//第三条
var i=0;var j=0; var k=0;
$(window).bind("scroll",function(){
//如果图片全部加载了,则跳出
if(hasShow1==true&&hasShow2==true&&hasShow3==true){
return;
}
var t1 = $(document).scrollTop();//获取滚动条
if(t1>100){ //如果滚动超过100 则把第二行的图片加载显示
i++; //这是我用了一个笨方法,如果加载过一次则不重复走这个方法。
if(i==1){
setTimeout($("#lazyBox1 .lazyImg").each(function(){$(this).attr("src",$(this).attr("alt"))}),4000);
hasShow1 = true;
document.getElementById("sp1").innerHTML=t1; //调试用的
}
}
if(t1>400){
j++;
if(j==1){
setTimeout($("#lazyBox2 .lazyImg").each(function(){$(this).attr("src",$(this).attr("alt"))}),4000);
hasShow2 = true;
}
}
if(t1>800){
k++;
if(k==1){
setTimeout($("#lazyBox3 .lazyImg").each(function(){$(this).attr("src",$(this).attr("alt"))}),4000);
hasShow3 = true;
}
}
});
</script>
</body>
</html>