通过JavaScript 来计算当前图片加载的张数。
原理:
先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同。
最后需要一个进度条与之结合即可。
这个脚本在做游戏的地方用得比较多。
演示:

jQuery的使用开始成为javascript开发者的主选产品,但如果没有一个整体的规划,简单的拿来主义势必带来后期维护成本的增加,大量的jQuery插件如同一把双刃剑,一方面大大节省了开发时间与周期,但同时也造成WEB页面加载的负担,带来的难护与二级扩展成本将非常庞大,因此,在使用之前就需要一个最基础的javascript架构体系,能明显基础功能组件,插件组件有效实施与扩展。

创建对象的三种方法
方法一:

复制代码 代码如下:

我们想,jQuery毕竟还只是一个基础的最底层的工具集,封装元素选择器,事件等等,基本上能满足一般的需求,但要从整体的WEB的周度来看,为了提高javascript开发的效率与可重用性,就需要有一个整体的布局,biuuu认为最简单的思路如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<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;
backgroundnull:url()
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=[[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘],
[‘]
];
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=””
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>

1,在现有的ajax接口之上再封装一层操作,主要是用于统一ajax入口,同时可以再细分把GET与POST两种进行分离,通过全局的入口,就能从整理上把关,如过滤参数,检验参数,增加全局参数等,一步到位,可复用性非常高,实现上如下:

var obj = new Object();
obj.属性 = 值;
//继续添加其它属性
obj.方法 = function(参数) {
//功能代码
}
//继续添加其它方法

来计算当前图片加载的张数。 原理:
先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同…

复制代码 代码如下:

方法二:

var ajax= {
get : function(){
jQuery.get(url, [data], [callback], [type])
}
post : function(){
jQuery.post(url, [data], [callback], [type])
}
}

复制代码 代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注