手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 免费部署 N8N 的 Zeabur 注册 | 登陆

JavaScript—计算图片加载的张数

首页 > Javascript >

Submitted by gouki on 2010, September 6, 5:07 PM. Javascript

看到cssrain.cn上这篇博客介绍的不错。挺有意思，虽然这个功能在很久以前就有人实现过。。。但现在看来又有不同的感觉
或许大家都记得，在几年前，网页特效中就有一个效果是网页正在下载数据，请稍等。然后是一个进度条，等完毕后，网页就打开了。其实说的就是Cssrain上的效果。不过几年前没有想过要兼容如今这么多的浏览器。所以，还是可以再了解一下（相册网站之类的可能会需要）
----START--

先定义一个图片的数组，然后通过image的onload事件来计算，注意，onload在ie和火狐有所不同。

最后需要一个进度条与之结合即可。

这个脚本在做游戏的地方用得比较多。

http://cssrain.cn/demo/plantsvs/loadImg.html
源码：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title></title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <style type="text/css">  
  7. *{  
  8.     margin:0;  
  9.     padding:0;  
  10. }  
  11. body{font-size:12px;}  
  12. /*不带文字*/  
  13. .progress{  
  14.     border:0;  
  15.     width: 152px;   
  16.     height: 18px;   
  17.     background:url(http://www.cssrain.cn/demo/makeProgress/img/progress.gif) no-repeat -100px 50%;  
  18. }  
  19. /*带文字显示*/  
  20. .progressbar_3{  
  21.     width:152px;  
  22.     position:relative;  
  23.     height:18px;  
  24.     text-align:center;  
  25.     position:relative;  
  26.     color:#222;  
  27. }  
  28. .progressbar_3 .text{  
  29.     width:152px;  
  30.     position:absolute;  
  31.     left:0;  
  32.     top:0;  
  33.     height:18px;  
  34.     line-height:18px;  
  35.     z-index:100;  
  36. }  
  37. .progressbar_3 .progress{  
  38.     width:152px;  
  39.     position:absolute;  
  40.     left:0;  
  41.     top:0;  
  42.     height:18px;  
  43.     z-index:10;  
  44. }  
  45. </style>  
  46. <script language="javascript">  
  47. var PicAr=[['http://www.cssrain.cn/images/bg.jpg','背景'],  
  48. ['http://www.cssrain.cn/images/c1.png','卡片'],  
  49. ['http://www.cssrain.cn/images/c2.png','卡片'],  
  50. ['http://www.cssrain.cn/images/c3.png','卡片'],  
  51. ['http://www.cssrain.cn/images/c4.png','卡片'],  
  52. ['http://www.cssrain.cn/images/c5.png','卡片'],  
  53. ['http://www.cssrain.cn/images/c6.png','卡片'],  
  54. ['http://www.cssrain.cn/images/c7.png','卡片'],  
  55. ['http://www.cssrain.cn/images/c8.png','卡片'],  
  56. ['http://www.cssrain.cn/images/sephira_software.png','卡片栏'],  
  57. ['http://www.cssrain.cn/images/tragic_phantom.png','剪草机'],  
  58. ['http://www.cssrain.cn/images/yahoo.gif','游戏LOGO界面'],  
  59. ['http://www.cssrain.cn/images/Control/Pic2.jpg','简介背景'],  
  60. ['http://www.cssrain.cn/demo/24_pages/image1.gif','image1'],  
  61. ['http://www.cssrain.cn/demo/24_pages/image2.gif','image2'],  
  62. ['http://www.cssrain.cn/demo/24_pages/meneame.jpg','简介背景'],  
  63. ['http://www.cssrain.cn/demo/24_pages/25css.jpg','简介背景']  
  64. ];  
  65.   
  66.   
  67. var LoadAccessNum=0; //载入成功的图片数量  
  68.   
  69. function $(id){  
  70.     return(document.getElementById(id));  
  71. }  
  72.   
  73. /*--------以下是载入图片进度条--------*/  
  74. var Browser=new Object();   
  75. Browser.userAgent=window.navigator.userAgent.toLowerCase();   
  76. Browser.ie=/msie/.test(Browser.userAgent);   
  77. Browser.Moz=/gecko/.test(Browser.userAgent);   
  78.   
  79. function LevelLoadProgress(){  
  80.     var PicNum=PicAr.length;  
  81.     $('text').innerHTML='正在准备载入游戏素材...';  
  82.     $("progress").style.backgroundPosition= "-150px 50%";  
  83.     for(n=0;n<=PicNum-1;n++){  
  84.         Imagess(n,PicAr[n][0],"img"+n,checkimg);   
  85.     }  
  86. }  
  87.   
  88. function Imagess(n,url,imgid,callback){      
  89.     var val=url;   
  90.     var img=new Image();   
  91.     if(Browser.ie){   
  92.         img.onreadystatechange =function(){    
  93.             if(img.readyState=="complete"||img.readyState=="loaded"){   
  94.                 callback(img,imgid,n);   
  95.             }   
  96.         }          
  97.     }else if(Browser.Moz){   
  98.         img.onload=function(){   
  99.             if(img.complete==true){   
  100.                 callback(img,imgid,n);   
  101.             }   
  102.         }          
  103.     }      
  104.     //如果因为网络或图片的原因发生异常，则显示该图片   
  105.     img.onerror=function(){img.src=val;img.onreadystatechange=null;}   
  106.     img.src=val;   
  107. }   
  108.   
  109. //检测图片加载  
  110. function checkimg(obj,imgid,n){  
  111.     LoadAccessNum+=1;  
  112.     var PicNum=PicAr.length,ReduceX=150/PicNum,imgFlagHeadLeft=139-LoadAccessNum*ReduceX;  
  113.     $('text').innerHTML='载入:'+PicAr[n][1]+'('+LoadAccessNum+'/'+PicNum+')';  
  114.     var a = parseInt(LoadAccessNum*ReduceX) ;  
  115.     $("progress").style.backgroundPosition= (a-150)+"px 50%";  
  116.     window.status=LoadAccessNum;  
  117.     if(LoadAccessNum==PicNum){  
  118.         $('dFlagMeter').style.display='none';  
  119.         LoadAccess();  
  120.         return false  
  121.     }  
  122. }  
  123. /*--------以上是载入图片进度条--------*/  
  124.   
  125. //调用载入图片进度条LevelLoadProgress(),载入成功后执行LoadAccess();  
  126. function LoadAccess(){  
  127.     $('dFlagMeter2').style.display='block';  
  128. }  
  129.   
  130. </script>  
  131. </head>  
  132. <body onload="document.execCommand('BackgroundImageCache',false,true);LoadAccess();">  
  133.   
  134. <div style="position: absolute; z-index: 255; left: 260px; top: 150px;" id="dFlagMeter">  
  135.     <table width="500" height="40" cellspacing="0" cellpadding="0" bordercolor="#000000" border="0">  
  136.         <tbody><tr>  
  137.   
  138.             <td width="343" valign="top">  
  139.                     <div class="progressbar_3">   
  140.                         <div id="text" class="text">正在准备载入游戏素材...</div>   
  141.                         <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%;"/>   
  142.                     </div>   
  143.              </td>  
  144.         </tr>  
  145.     </tbody>  
  146.     </table>  
  147. </div>  
  148.   
  149. <div style="display:none;position: absolute; z-index: 254; left: 260px; top: 150px;" id="dFlagMeter2">载入成功!</div>  
  150.    
  151.   
  152. <script type="text/javascript">  
  153. LevelLoadProgress();  
  154. </script>  
  155. </body>  
  156. </html>  


本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):

免费部署 N8N 的 Zeabur