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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
JavaScript动态绑定详解
2017/09/14 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python代码过长的换行方法
2018/07/19 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python构建指数平滑预测模型示例
2019/11/21 Python
商场总经理岗位职责
2014/02/03 职场文书
向领导表决心的话
2014/03/11 职场文书
环保公益广告语
2014/03/13 职场文书
追悼会主持词
2014/03/20 职场文书
测控技术自荐信
2014/06/05 职场文书