手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript 计算图片加载数量的代码
JavaScript 计算图片加载数量的代码
摘要:通过JavaScript来计算当前图片加载的张数。原理:先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload...

通过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=gb2312" />

<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 id="dFlagMeter">

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

<tbody><tr>

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

<div>

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

<img id="progress" width="152" height="18" title="100%" alt="100%" src="http://www.cssrain.cn/demo/makeProgress/img/bg.gif"/>

</div>

</td>

</tr>

</tbody>

</table>

</div>

<div id="dFlagMeter2">载入成功!</div>

<script type="text/javascript">

LevelLoadProgress();

</script>

</body>

</html>

【JavaScript 计算图片加载数量的代码】相关文章:

JavaScript function函数种类详解

JavaScript中search()方法的使用

JavaScript中eval函数的问题

JavaScript中的italics()方法的使用介绍

JavaScript实现广告的关闭与显示效果实例

JavaScript动态添加style节点的方法

javascript瀑布流式图片懒加载实例

HTML TO JavaScript 转换

JavaScript中反正弦函数Math.asin()的使用简介

JavaScript实现鼠标点击后层展开效果的方法

精品推荐
分类导航