html获取本地图片数量,JavaScript 计算图片加载数量的代码

通过JavaScript 来计算当前图片加载的张数。

原理：

先定义一个图片的数组，然后通过image的onload事件来计算，注意，onload在ie和火狐有所不同。

最后需要一个进度条与之结合即可。

这个脚本在做游戏的地方用得比较多。

演示：

*{

margin:0;

padding:0;

}

body{font-size:12px;}

/*不带文字*/

.progress{

border:0;

width: 152px;

height: 18px;

background:url(http://www.cssrain.cn/demo/makeProgress/img/progress.gif) no-repeat -100px 50%;

}

/*带文字显示*/

.progressbar_3{

width:152px;

position:relative;

height:18px;

text-align:center;

position:relative;

color:#222;

}

.progressbar_3 .text{

width:152px;

position:absolute;

left:0;

top:0;

height:18px;

line-height:18px;

z-index:100;

}

.progressbar_3 .progress{

width:152px;

position:absolute;

left:0;

top:0;

height:18px;

z-index:10;

}

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.οnlοad=function(){

if(img.complete==true){

callback(img,imgid,n);

}

}

}

//如果因为网络或图片的原因发生异常，则显示该图片

img.οnerrοr=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();