木木彡blog

注册

登录

您现在的位置是：首页 > 学无止境

JavaScript—计算图片加载的张数

木木彡82 2010-09-03 14:27:00 共355人围观

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

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

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

转载自：http://www.cssrain.cn/?p=1391

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'; }

LevelLoadProgress();

上一篇：PHP访问MySQL查询超时处理

下一篇：PHP函数的实现原理及性能分析

相关文章

文章评论

登录后评论

PHP
JavaScript
Linux
MySQL
MongoDB
Python
Docker
Html5
网络
其它
Java
Go
Redis

点击排行

php-fpm安装、配置与优化
转载自：https://www.zybuluo.com/phper/note/89081 1、php中...
centos下postgresql的安装与配置
一、安装(以root身份进行)1、检出最新的postgresql的yum配置从ht...
Mysql的大小写敏感性
MYSQL在默认的情况下查询是不区分大小写的，例如：CREATE TABLE...
关于URL编码
转载自：http://www.ruanyifeng.com/blog/2010/02/url_encoding....
header中的Cache-control
网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的...