JavaScript—画像のロードされた枚数を計算します.

45822 ワード

JavaScriptによって現在のピクチャローディングの枚数を計算します.
原理:
まず一つの画像の配列を定義して、イメージのワンロードイベントで計算します.ワンロードは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>