Posted in Javascript onJanuary 01, 2011
通过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 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>
JavaScript 计算图片加载数量的代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@