通過JavaScript 來計算當前圖片載入的張數。
原理：
先定義一個圖片的數組，然後通過image的onload事件來計算，注意，onload在ie和Firefox有所不同。
最後需要一個進度條與之結合即可。
這個指令碼在做遊戲的地方用得比較多。
示範：
複製代碼 代碼如下:<!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>
