我们做一个图片显示的列表，可能因为网速，或者图片比较大的原因，图片显示比较慢，感觉有些图片从上倒下慢慢的才显示出来或者一开始一直的白色空的。
我想的就是，在img所要显示的图片，没有完全加载完的时候，显示一张loading等待图片,等加载玩再去掉等待图片，显示要显示的图片。请问这个怎么做，代码怎么写？
我想的就是，在img所要显示的图片，没有完全加载完的时候，显示一张loading等待图片,等加载玩再去掉等待图片，显示要显示的图片。请问这个怎么做，代码怎么写？
<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>