JavaScript—计算图片加载的张数。

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

原理：

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

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

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

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

*{

    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;

}

</style>

<script language="javascript">

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';

}



</script>

</head>

<body onload="document.execCommand('BackgroundImageCache',false,true);LoadAccess();">



<div style="position: absolute; z-index: 255; left: 260px; top: 150px;" id="dFlagMeter">

    <table width="500" height="40" cellspacing="0" cellpadding="0" bordercolor="#000000" border="0">

        <tbody><tr>

            <td width="343" valign="top">

                    <div class="progressbar_3"> 

                        <div id="text" class="text">正在准备载入游戏素材...</div> 

                        <img  id="progress" class="progress" width="152" height="18" title="100%" alt="100%" src="http://www.cssrain.cn/demo/makeProgress/img/bg.gif" style="background-position: -150px 50%;"/> 

                    </div> 

             </td>

        </tr>

    </tbody>

    </table>

</div>



<div style="display:none;position: absolute; z-index: 254; left: 260px; top: 150px;" id="dFlagMeter2">载入成功!</div>

 



<script type="text/javascript">

LevelLoadProgress();

</script>

</body>

</html>

posted on 2011-12-03 14:05 缘从心开始阅读(204) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

缘从心开始

JavaScript—计算图片加载的张数。

导航

公告