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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
数控加工专业毕业生自荐信
2013/09/27 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
银行求职推荐信范文
2013/11/30 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
心理健康教育制度
2014/01/27 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
幼师小班个人总结
2015/02/12 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
关于环保的广播稿
2015/12/17 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis