JavaScript 計(jì)算圖片加載數(shù)量的代碼
更新時(shí)間：2011年01月01日 18:20:44 作者：
先定義一個(gè)圖片的數(shù)組，然后通過image的onload事件來計(jì)算，注意，onload在ie和火狐有所不同。
通過JavaScript 來計(jì)算當(dāng)前圖片加載的張數(shù)。
原理：
先定義一個(gè)圖片的數(shù)組，然后通過image的onload事件來計(jì)算，注意，onload在ie和火狐有所不同。
最后需要一個(gè)進(jìn)度條與之結(jié)合即可。
這個(gè)腳本在做游戲的地方用得比較多。
演示：
<!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','剪草機(jī)'],
['http://www.cssrain.cn/images/yahoo.gif','游戲LOGO界面'],
['http://www.cssrain.cn/images/Control/Pic2.jpg','簡(jiǎn)介背景'],
['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','簡(jiǎn)介背景'],
['http://www.cssrain.cn/demo/24_pages/25css.jpg','簡(jiǎn)介背景']
];
var LoadAccessNum=0; //載入成功的圖片數(shù)量
function $(id){
return(document.getElementById(id));
}
/*--------以下是載入圖片進(jìn)度條--------*/
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='正在準(zhǔn)備載入游戲素材...';
$("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);
}
}
}
//如果因?yàn)榫W(wǎng)絡(luò)或圖片的原因發(fā)生異常，則顯示該圖片
img.onerror=function(){img.src=val;img.onreadystatechange=null;}
img.src=val;
}
//檢測(cè)圖片加載
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
}
}
/*--------以上是載入圖片進(jìn)度條--------*/
//調(diào)用載入圖片進(jìn)度條LevelLoadProgress(),載入成功后執(zhí)行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">正在準(zhǔn)備載入游戲素材...</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>
原理：
先定義一個(gè)圖片的數(shù)組，然后通過image的onload事件來計(jì)算，注意，onload在ie和火狐有所不同。
最后需要一個(gè)進(jìn)度條與之結(jié)合即可。
這個(gè)腳本在做游戲的地方用得比較多。
演示：
復(fù)制代碼 代碼如下:
<!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','剪草機(jī)'],
['http://www.cssrain.cn/images/yahoo.gif','游戲LOGO界面'],
['http://www.cssrain.cn/images/Control/Pic2.jpg','簡(jiǎn)介背景'],
['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','簡(jiǎn)介背景'],
['http://www.cssrain.cn/demo/24_pages/25css.jpg','簡(jiǎn)介背景']
];
var LoadAccessNum=0; //載入成功的圖片數(shù)量
function $(id){
return(document.getElementById(id));
}
/*--------以下是載入圖片進(jìn)度條--------*/
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='正在準(zhǔn)備載入游戲素材...';
$("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);
}
}
}
//如果因?yàn)榫W(wǎng)絡(luò)或圖片的原因發(fā)生異常，則顯示該圖片
img.onerror=function(){img.src=val;img.onreadystatechange=null;}
img.src=val;
}
//檢測(cè)圖片加載
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
}
}
/*--------以上是載入圖片進(jìn)度條--------*/
//調(diào)用載入圖片進(jìn)度條LevelLoadProgress(),載入成功后執(zhí)行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">正在準(zhǔn)備載入游戲素材...</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>
您可能感興趣的文章:
- js實(shí)現(xiàn)圖片加載時(shí)候逐漸出現(xiàn)的雜色效果
- JavaScript實(shí)現(xiàn)頁面滾動(dòng)圖片加載(仿lazyload效果)
- JavaScript前端圖片加載管理器imagepool使用詳解
- JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
- 解決js圖片加載時(shí)出現(xiàn)404的問題
- Android程序開發(fā)ListView+Json+異步網(wǎng)絡(luò)圖片加載+滾動(dòng)翻頁的例子（圖片能緩存，圖片不錯(cuò)亂）
- js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法
- Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法
相關(guān)文章
微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決
這篇文章主要介紹了微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了詳解webpack 熱更新優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
javascript實(shí)現(xiàn)簡(jiǎn)約的頁面右下角點(diǎn)擊彈出窗口示例【測(cè)試可用】
這篇文章主要介紹了javascript實(shí)現(xiàn)的頁面右下角點(diǎn)擊彈出窗口功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript頁面右下角點(diǎn)擊彈出窗口功能的相關(guān)步驟、原理與注意事項(xiàng),需要的朋友可以參考下2023-07-07
基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例
這篇文章主要介紹了基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼,需要的朋友可以參考下2017-01-01
BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用
BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開源插件（ GitHub地址 ），非常不錯(cuò)，下面腳本之家小編給大家分享BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用，一起看看吧2017-09-09
微信小程序tabBar模板用法實(shí)例分析【附demo源碼下載】
這篇文章主要介紹了微信小程序tabBar模板用法,結(jié)合具體實(shí)例形式分析了tabBar模板的定義、配置、引用等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
微信小程序五子棋游戲的棋盤，重置，對(duì)弈實(shí)現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲,可實(shí)現(xiàn)五子棋的棋盤繪制,重置,對(duì)弈判定等功能實(shí)現(xiàn),并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
JavaScript實(shí)現(xiàn)斗地主游戲的思路
這篇文章主要介紹了JavaScript實(shí)現(xiàn)斗地主游戲的思路的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)煙花爆炸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03