로드된 이미지 수를 계산하는 JavaScript 코드_javascript 기술

JavaScript를 사용하여 현재 로드된 이미지 수를 계산합니다. 원리: 먼저 이미지 배열을 정의한 다음 이미지의 onload 이벤트를 통해 이를 계산합니다. IE와 Firefox에서는 onload가 다릅니다. 마지막으로 결합하려면 진행률 표시줄이 필요합니다. 이 스크립트는 게임에서 자주 사용됩니다. 데모:

코드 복사 코드는 다음과 같습니다. *{ 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; } 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 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'; } 正在准备载入游戏素材... 载入成功! 레벨로드진행();

로드된 이미지 수를 계산하는 JavaScript 코드_javascript 기술

관련 기사