通过JavaScript 来计算当前图片加载的张数。 原理: 先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同。 最后需要一个进度条与之结合即可。 这个脚本在做游戏的地方用得比较多。 演示: 复制代码 代码如下: <br>*{ <br>margin:0; <br>padding:0; <br>} <br>body{font-size:12px;} <br>/*不带文字*/ <br>.progress{ <br>border:0; <br>width: 152px; <br>height: 18px; <br>background:url(http://www.cssrain.cn/demo/makeProgress/img/progress.gif) no-repeat -100px 50%; <br>} <br>/*带文字显示*/ <br>.progressbar_3{ <br>width:152px; <br>position:relative; <br>height:18px; <br>text-align:center; <br>position:relative; <br>color:#222; <br>} <br>.progressbar_3 .text{ <br>width:152px; <br>position:absolute; <br>left:0; <br>top:0; <br>height:18px; <br>line-height:18px; <br>z-index:100; <br>} <br>.progressbar_3 .progress{ <br>width:152px; <br>position:absolute; <br>left:0; <br>top:0; <br>height:18px; <br>z-index:10; <br>} <br> <br>var PicAr=[['http://www.cssrain.cn/images/bg.jpg','背景'], <br>['http://www.cssrain.cn/images/c1.png','卡片'], <br>['http://www.cssrain.cn/images/c2.png','卡片'], <br>['http://www.cssrain.cn/images/c3.png','卡片'], <br>['http://www.cssrain.cn/images/c4.png','卡片'], <br>['http://www.cssrain.cn/images/c5.png','卡片'], <br>['http://www.cssrain.cn/images/c6.png','卡片'], <br>['http://www.cssrain.cn/images/c7.png','卡片'], <br>['http://www.cssrain.cn/images/c8.png','卡片'], <br>['http://www.cssrain.cn/images/sephira_software.png','卡片栏'], <br>['http://www.cssrain.cn/images/tragic_phantom.png','剪草机'], <br>['http://www.cssrain.cn/images/yahoo.gif','游戏LOGO界面'], <br>['http://www.cssrain.cn/images/Control/Pic2.jpg','简介背景'], <br>['http://www.cssrain.cn/demo/24_pages/image1.gif','image1'], <br>['http://www.cssrain.cn/demo/24_pages/image2.gif','image2'], <br>['http://www.cssrain.cn/demo/24_pages/meneame.jpg','简介背景'], <br>['http://www.cssrain.cn/demo/24_pages/25css.jpg','简介背景'] <br>]; <br>var LoadAccessNum=0; //载入成功的图片数量 <br>function $(id){ <br>return(document.getElementById(id)); <br>} <br>/*--------以下是载入图片进度条--------*/ <br>var Browser=new Object(); <br>Browser.userAgent=window.navigator.userAgent.toLowerCase(); <br>Browser.ie=/msie/.test(Browser.userAgent); <br>Browser.Moz=/gecko/.test(Browser.userAgent); <br>function LevelLoadProgress(){ <br>var PicNum=PicAr.length; <br>$('text').innerHTML='正在准备载入游戏素材...'; <br>$("progress").style.backgroundPosition= "-150px 50%"; <br>for(n=0;n<=PicNum-1;n++){ <BR>Imagess(n,PicAr[n][0],"img"+n,checkimg); <BR>} <BR>} <BR>function Imagess(n,url,imgid,callback){ <BR>var val=url; <BR>var img=new Image(); <BR>if(Browser.ie){ <BR>img.onreadystatechange =function(){ <BR>if(img.readyState=="complete"||img.readyState=="loaded"){ <BR>callback(img,imgid,n); <BR>} <BR>} <BR>}else if(Browser.Moz){ <BR>img.onload=function(){ <BR>if(img.complete==true){ <BR>callback(img,imgid,n); <BR>} <BR>} <BR>} <BR>//如果因为网络或图片的原因发生异常,则显示该图片 <BR>img.onerror=function(){img.src=val;img.onreadystatechange=null;} <BR>img.src=val; <BR>} <BR>//检测图片加载 <BR>function checkimg(obj,imgid,n){ <BR>LoadAccessNum+=1; <BR>var PicNum=PicAr.length,ReduceX=150/PicNum,imgFlagHeadLeft=139-LoadAccessNum*ReduceX; <BR>$('text').innerHTML='载入:'+PicAr[n][1]+'('+LoadAccessNum+'/'+PicNum+')'; <BR>var a = parseInt(LoadAccessNum*ReduceX) ; <BR>$("progress").style.backgroundPosition= (a-150)+"px 50%"; <BR>window.status=LoadAccessNum; <BR>if(LoadAccessNum==PicNum){ <BR>$('dFlagMeter').style.display='none'; <BR>LoadAccess(); <BR>return false <BR>} <BR>} <BR>/*--------以上是载入图片进度条--------*/ <BR>//调用载入图片进度条LevelLoadProgress(),载入成功后执行LoadAccess(); <BR>function LoadAccess(){ <BR>$('dFlagMeter2').style.display='block'; <BR>} <BR> 正在准备载入游戏素材... 表> 加载成功! LevelLoadProgress(); 脚本> 身体>