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继承的实现
Oct 24 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
js style动态设置table高度
Oct 21 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue离开当前页面触发的函数代码
Sep 01 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
做一个有下拉功能的留言版
2006/10/09 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
详解python开发环境搭建
2016/12/16 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python 安装impala包步骤
2020/03/28 Python
简单的Python人脸识别系统
2020/07/14 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
七一讲话心得体会
2014/09/05 职场文书
小班教师个人总结
2015/02/05 职场文书
前台岗位职责
2015/02/13 职场文书
税务会计岗位职责
2015/04/02 职场文书
民事撤诉申请书范本
2015/05/18 职场文书