JavaScript计算图片加载数量的代码_javascript技巧

 通过JavaScript 来计算当前图片加载的张数。
原理：
先定义一个图片的数组，然后通过image的onload事件来计算，注意，onload在ie和火狐有所不同。
最后需要一个进度条与之结合即可。
这个脚本在做游戏的地方用得比较多。
演示：
代码如下:







var PicAr=[['http://www.cssrain.cn/images/bg.jpg','背景'],
['http://www.cssrain.cn/images/c1.png','卡片'],
['http://www.cssrain.cn/images/c2.png','卡片'],
['http://www.cssrain.cn/images/c3.png','卡片'],
['http://www.cssrain.cn/images/c4.png','卡片'],
['http://www.cssrain.cn/images/c5.png','卡片'],
['http://www.cssrain.cn/images/c6.png','卡片'],
['http://www.cssrain.cn/images/c7.png','卡片'],
['http://www.cssrain.cn/images/c8.png','卡片'],
['http://www.cssrain.cn/images/sephira_software.png','卡片栏'],
['http://www.cssrain.cn/images/tragic_phantom.png','剪草机'],
['http://www.cssrain.cn/images/yahoo.gif','游戏LOGO界面'],
['http://www.cssrain.cn/images/Control/Pic2.jpg','简介背景'],
['http://www.cssrain.cn/demo/24_pages/image1.gif','image1'],
['http://www.cssrain.cn/demo/24_pages/image2.gif','image2'],
['http://www.cssrain.cn/demo/24_pages/meneame.jpg','简介背景'],
['http://www.cssrain.cn/demo/24_pages/25css.jpg','简介背景']
];
var LoadAccessNum=0; //载入成功的图片数量
function $(id){
return(document.getElementById(id));
}
/*--------以下是载入图片进度条--------*/
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
function LevelLoadProgress(){
var PicNum=PicAr.length;
$('text').innerHTML='正在准备载入游戏素材...';
$("progress").style.backgroundPosition= "-150px 50%";
for(n=0;n<=PicNum-1;n++){
Imagess(n,PicAr[n][0],"img"+n,checkimg);
}
}
function Imagess(n,url,imgid,callback){
var val=url;
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
callback(img,imgid,n);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback(img,imgid,n);
}
}
}
//如果因为网络或图片的原因发生异常，则显示该图片
img.onerror=function(){img.src=val;img.onreadystatechange=null;}
img.src=val;
}
//检测图片加载
function checkimg(obj,imgid,n){
LoadAccessNum+=1;
var PicNum=PicAr.length,ReduceX=150/PicNum,imgFlagHeadLeft=139-LoadAccessNum*ReduceX;
$('text').innerHTML='载入:'+PicAr[n][1]+'('+LoadAccessNum+'/'+PicNum+')';
var a = parseInt(LoadAccessNum*ReduceX) ;
$("progress").style.backgroundPosition= (a-150)+"px 50%";
window.status=LoadAccessNum;
if(LoadAccessNum==PicNum){
$('dFlagMeter').style.display='none';
LoadAccess();
return false
}
}
/*--------以上是载入图片进度条--------*/
//调用载入图片进度条LevelLoadProgress(),载入成功后执行LoadAccess();
function LoadAccess(){
$('dFlagMeter2').style.display='block';
}

正在准备载入游戏素材...

载入成功!

LevelLoadProgress();