<script>
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
function chk(){
l--;
document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
if (l==0){
for (var i=0;i<sum;i++)
document.body.innerHTML+="<img src='"+imgs[i].src+"'>"
}
}
if (document.images){
imgs[0]=new Image()
imgs[1]=new Image()
imgs[2]=new Image()
imgs[3]=new Image()
imgs[4]=new Image()
imgs[5]=new Image()
imgs[6]=new Image()
imgs[7]=new Image()
imgs[0].src="/articleimg/2006/08/3859/01.jpg";
imgs[1].src="/articleimg/2006/08/3859/02.jpg";
imgs[2].src="/articleimg/2006/08/3859/03.jpg";
imgs[3].src="/articleimg/2006/08/3859/04.jpg";
imgs[4].src="/articleimg/2006/08/3859/05.jpg";
imgs[5].src="/articleimg/2006/08/3859/06.jpg";
imgs[6].src="/articleimg/2006/08/3859/07.jpg";
imgs[7].src="/articleimg/2006/08/3859/08.jpg";
}
</script>
<body>
<div id="aa">0%</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//無論圖片是否加載成功，都執(zhí)行指定方法
}
</script>
</body>
-----------------------------另外一個-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>好用的JS圖片預加載類 - 中國asp之家</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
//<![CDATA[
/*************************
*簡單的圖片加載類
*功能：避免了在img 里直接判斷寬高造成屏幕的閃爍
*函數(shù)：loadImage，用來加載圖片，可以在head中直接使用，也可以在你所需要的位置使用。
*參數(shù)：
*url:圖片url
*alt:圖片alt
*maxWidth:最大寬度，可不設置
*maxHeight:最大高度，可不設置
*id:圖片img的id,如果查找不到這個id，直接在所在位置插入一個img
*作者：子烏,sheneyan
*************************/
ImageLoader=function(){
//自定義的<a target="_blank">系統(tǒng)</a>參數(shù)，保存指定的Image對象
if (!window.imageLoaders)
window.imageLoaders={};
//將所有列表中的圖片默認隱藏,在系統(tǒng)加載完畢后立即執(zhí)行，不過opera的加載機制似乎與ie和ff不同，它會等所有圖片都加載完才執(zhí)行onload，所以這些代碼實際作用不大...
window.hideImage=function(){
for (a in window.imageLoaders)document.getElementById(a).style.display='none';
}
if (document.all)
window.attachEvent("onload",window.hideImage);
else
window.addEventListener('load',window.hideImage,false);
//兼容ff，ff底下沒有readyState參數(shù)，在開始事件中設置document.readyState來模擬ie的效果
if (!document.all)
window.addEventListener('load',function(){document.readyState='complete'},false)
//自定義的圖片加載方法
window.imageComplete=function(i){
var obj=window.imageLoaders[i];
clearInterval(obj.timer);
var mw=obj.maxWidth;
var mh=obj.maxHeight;
var id=obj.uid;
var img=document.getElementById(id);
if (!img){
img=document.createElement("img");
img.style.display='none';
img.setAttribute('id',id);
document.body.appendChild(img);
}
if (obj.width>obj.height)
if (mw>0)
if (obj.width>mw)
img.width=mw;
else
if (mh>0)
if (obj.height>mh)
img.height=mh;
img.src=obj.src;
img.alt=obj.alt;
img.style.display='';
window.imageLoaders[i]=null;
}
//加載圖片方法，如果id不提供，或者為false，將直接插入一個img
this.loadImage=function(url,alt,maxWidth,maxHeight,id){
var imgObj=new Image();
imgObj.src=url;
imgObj.uid=id;
imgObj.alt=alt;
imgObj.maxWidth=maxWidth;
imgObj.maxHeight=maxHeight;
if (!id){
imgObj.uid='img_sheneyan_'+Math.random()*100;
/*hutia的寫法：
document.write(String.fromCharCode(60)+"img src='' id='"+imgObj.uid+"'/"+String.fromCharCode(62))*/
/*mirycat的寫法：前后加CDATA*/
document.write("<img src='' id='"+imgObj.uid+"'/>")
}
window.imageLoaders[imgObj.uid]=imgObj;
imgObj.onload=function(){
window.imageLoaders[this.uid].timer=setInterval("if (document.readyState=='complete'){window.imageComplete('"+this.uid+"');}",500);
}
imgObj.onerror=function(){window.status='加載'+src+'失敗';}
}
}
var ii=new ImageLoader();
ii.loadImage("/article/UploadPic/20078/13/200781314615752.jpg",'i61',100,100,"i61")
ii.loadImage("/article/UploadPic/20078/13/200781314617874.jpg",'i62',100,100,"i62")
ii.loadImage("/article/UploadPic/20078/13/200781314617393.jpg",'i63',100,100,"i63")
ii.loadImage("/article/UploadPic/20078/13/200781314617407.jpg",'i64',100,100,"i64")
ii.loadImage("/article/UploadPic/20078/13/200781314618696.jpg",'i65',120,100,"i65")
ii.loadImage("/article/UploadPic/20078/13/200781314619838.jpg",'i66',100,100,"i66")
//]]>
</script>
</head>
<body>
<p>
<img src='' id= "i61" alt=''/>
<img src='' id= "i62" alt=''/>
<img src='' id= "i63" alt='' />
<img src='' id= "i64" alt=''/>
<img src='' id= "i65" alt=''/>
<img src='' id= "i66" alt=''/>
</p>
<div style="background:green;">
<img src='' id='test' alt=''/>
</div>
<div style="border:solid 1px;position:absolute;left:100px;top:150px;padding:10px;background:red">
<script type="text/javascript">
ii.loadImage("/article/UploadPic/20078/13/200781314619788.jpg",'aspxhome.com',100,100)
ii.loadImage("/article/UploadPic/20078/13/200781314619352.jpg",'中國asp之家',100,130)
ii.loadImage("/article/UploadPic/20078/13/200781314619391.jpg",'i3',100,100)
</script>
</div>
<div style="border:solid 1px;position:absolute;left:100px;top:350px;padding:10px;background:blue">
<script type="text/javascript">
ii.loadImage("/article/UploadPic/20078/13/200781314620905.jpg",'i4',160,100)
ii.loadImage("/article/UploadPic/20078/13/200781314622644.jpg",'i5',100,150,'test');
ii.loadImage("/article/UploadPic/20078/13/200781314622236.jpg",'i6',100,100,false)
</script>
</div>
</body>
</html>
]]>
]]>