JavaScript 计算图片加载数量的代码


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 相关文章推荐
浅析jquery的作用与优势
Dec 02 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
Javascript的this详解
Mar 23 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 #Javascript
基于jQuery架构javascript基础体系
Jan 01 #Javascript
jQuery技巧总结
Jan 01 #Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 #Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 #Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 #Javascript
Javascript事件热键兼容ie|firefox
Dec 30 #Javascript
You might like
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP错误处理函数
2016/04/03 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python循环监控远程端口的方法
2015/03/14 Python
python中的全局变量用法分析
2015/06/09 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
ipython和python区别详解
2019/06/26 Python
Python eval函数介绍及用法
2020/11/09 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
python pillow库的基础使用教程
2021/01/13 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
商务英语本科生的自我评价分享
2013/11/15 职场文书
出国留学计划书
2014/04/27 职场文书
综合素质评价自我评价
2015/03/06 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
廉政承诺书2015
2015/04/28 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
导游词之井冈山
2019/11/20 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python