JavaScript—计算图片加载的张数

转载自：http://www.cssrain.cn/?p=1391

 

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();