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 15 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
javascript简单实现深浅拷贝过程详解
Oct 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
微信支付开发交易通知实例
2016/07/12 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
Javascript的闭包
2009/12/31 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
eclipse创建python项目步骤详解
2019/05/10 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
内科护士实习自我鉴定
2013/10/17 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
医学专业自荐信
2014/06/14 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript