【一个简单的JavaScript 延迟加载图片】

<html>
<head>
<title>wujinjian</title>
<script type="text/javascript"> var imgurlarr=new Array
(
"http://i.6.cn/cvbnm/22/22/6d/70499a61a1ae1d992bf4268b3117eba1.jpg",
"http://i.6.cn/cvbnm/cd/24/4d/d32bd2324a3015ae9b7009bfa11be161.jpg",
"http://i.6.cn/cvbnm/06/dd/14/1c34d1d4b898503600263c0c4d56fd80.jpg",
"http://i.6.cn/cvbnm/fb/e0/9d/184d9870a12091b8cb73cd6d0b43c98f.jpg",
"http://i.6.cn/cvbnm/d7/6a/45/466e575c091203ce3a140cf5ebcd931e.jpg",
"http://i.6.cn/cvbnm/7f/ab/05/f92014a556d07c62f8fb5227e7d72035.jpg",
"http://i.6.cn/cvbnm/2c/b8/cc/7f62a67004463a24af4b3499d418dc3f.jpg",
"http://i.6.cn/cvbnm/3a/03/06/8d2a27141cac361b55605f3cfbbcaf3e.jpg",
"http://i.6.cn/cvbnm/9e/0d/e6/9b07a466b4576de78d724d938c634536.jpg",
"http://i.6.cn/cvbnm/2c/52/06/7f216038eb723b6f653337bbd29818b2.jpg",
"http://i.6.cn/cvbnm/56/16/cb/370d55033c254d641ce8bbad78322b34.jpg",
"http://i.6.cn/cvbnm/06/1f/30/bee2b8c37173deb8386bb53677e1198d.jpg",
"http://i.6.cn/cvbnm/08/ae/3b/64cba2459be9b7f487b86e3973b5b79e.jpg",
"http://i.6.cn/cvbnm/1e/bb/7d/2b7620e12bc61bd4216feb3ee3355f84.jpg",
"http://i.6.cn/cvbnm/71/f3/d7/bc9bbb3fac966c7de986f3a477376468.jpg",
"http://i.6.cn/cvbnm/6c/bd/86/a6c8964a73615903335bd12b5e29ed39.jpg",
"http://i.6.cn/cvbnm/99/5c/b3/60be529ae554ce706216eae3d2cfb80c.jpg",
"http://i.6.cn/cvbnm/c7/01/2f/a38854673bb70bd62a391f97ca576c4e.jpg",
"http://i.6.cn/cvbnm/8b/68/68/5675cb4a5eb2d96506d4133ecf250d18.jpg",
"http://i.6.cn/cvbnm/7f/71/77/6f279c1390e00a3bbe6a7d7f1b14e978.jpg",
"http://i.6.cn/cvbnm/14/76/75/86767945f30c1146b177b5fc65896e79.jpg",
"http://i.6.cn/cvbnm/b3/61/00/324c45a5e9a54953c2d6270926e6f2b9.jpg",
"http://i.6.cn/cvbnm/4f/b5/e2/ee4a75a426f9d862591a485cf93d12bc.jpg",
"http://i.6.cn/cvbnm/d1/cd/92/0d27a772852ca72b6ffa5219b3736a32.jpg",
"http://i.6.cn/cvbnm/5b/88/fe/385c4c7244e30329940971d6a44df5dc.jpg",
"http://i.6.cn/cvbnm/b5/18/a1/3e1f5ed15eb273ef0d812c63570d738c.jpg",
"http://i.6.cn/cvbnm/f7/ed/3b/90ed04f41b01a28107860580a64c0ea1.jpg",
"http://i.6.cn/cvbnm/23/a9/e9/f438f6ff990d168e81626671da1fc596.jpg",
"http://i.6.cn/cvbnm/51/12/b2/f3d2dbcc0fcc2cff3147bef0f65c7158.jpg",
"http://i.6.cn/cvbnm/a4/b2/b0/045c3e4a40ba0451f853c3681bef8015.jpg"
) var img=imgurlarr.length; //一共有多少张图片
var yc=100; //延迟多少毫秒加载
var timer;
var divobj; var a=img;
var b=0; function _onload()
{
divobj=document.getElementById("showdivId");

var tabstr=""
for(var i=0;i<img;i++)
{
tabstr=tabstr+"<td><img id='imgid"+i+"' src='' style='width:230px;height:172px'></td>";
} divobj.innerHTML="<table><tr>"+tabstr+"</tr></table>" scrollLoad();
} function scrollLoad()
{
clearTimeout(timer); timer=setTimeout("startLoad()",yc);
} function startLoad()
{
var scrollleft=divobj.scrollLeft; var startimg=parseInt(scrollleft/230);//230 为图像的宽度 if(startimg+3>=img)
showImg([startimg,startimg+1,startimg+2]);
else
showImg([startimg,startimg+1,startimg+2,startimg+3]);
} function showImg(arrimg)
{
for(var i=0;i<arrimg.length;i++)
{
if(document.getElementById("imgid"+arrimg[i]).src.toLowerCase().indexOf(".jpg")==-1) //判断如果已经加载过的就不要加载了
{
document.getElementById("imgid"+arrimg[i]).src=imgurlarr[arrimg[i]]; a--;
b++;
}
} document.getElementById("txid").value="已经加载："+b+" 张图片，未加载："+a+" 张图片";
}
</script>
</head>
<body onload="_onload()">
<div id="showdivId" style="width:700px;height:200px;overflow-x:scroll;background-color:rgb(223,223,223)" onscroll="scrollLoad()">
</div>
<br>
<input type="text" id="txid" style="width:300px">
</body>
</html>