Use JavaScript to calculate the number of sheets loaded by the current picture.
First define a picture of the array, and then through the image of the OnLoad event to calculate, note that the onload in IE and Firefox different.
Finally, you need a progress bar to combine with it.
This script is used more in the game area.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
body{font-size:12px;}
/* without text * *
. progress{
border:0;
width:152px;
height:18px;
Background:url (yun_qi_img/progress.gif) no-repeat-100px 50%;
}
/* with text display * *
. 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=[[' yun_qi_img/bg.jpg ', ' background '],
[' Yun_qi_img/c1.png ', ' cards '],
[' Yun_qi_img/c2.png ', ' cards '],
[' Yun_qi_img/c3.png ', ' cards '],
[' Yun_qi_img/c4.png ', ' cards '],
[' Yun_qi_img/c5.png ', ' cards '],
[' Yun_qi_img/c6.png ', ' cards '],
[' Yun_qi_img/c7.png ', ' cards '],
[' Yun_qi_img/c8.png ', ' cards '],
[' Yun_qi_img/sephira_software.png ', ' card bar '],
[' yun_qi_img/tragic_phantom.png ', ' lawn mower '],
[' Yun_qi_img/yahoo.gif ', ' Game logo interface '],
[' yun_qi_img/pic2.jpg ', ' profile background '],
[' Yun_qi_img/image1.gif ', ' image1 '],
[' Yun_qi_img/image2.gif ', ' image2 '],
[' yun_qi_img/meneame.jpg ', ' profile background '],
[' yun_qi_img/25css.jpg ', ' Profile background ']
];
var loadaccessnum=0; Number of successful pictures loaded
function $ (ID) {
Return (document.getElementById (ID));
}
/*--------Below is the loading picture progress bar--------* *
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= ' is preparing to load the game material ... ';
$ ("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);
}
}
}
If an exception occurs because of a network or picture, the picture is displayed
Img.onerror=function () {img.src=val;img.onreadystatechange=null;}
Img.src=val;
}
Detect picture Loading
function Checkimg (obj,imgid,n) {
Loadaccessnum+=1;
var Picnum=picar.length,reducex=150/picnum,imgflagheadleft=139-loadaccessnum*reducex;
$ (' text '). innerhtml= ' Load: ' +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
}
}
/*--------above is the loading picture progress bar--------* *
Call load Picture progress bar levelloadprogress (), Load successfully execute loadaccess ();
function loadaccess () {
$ (' DFlagMeter2 '). style.display= ' block ';
}
</script>
<body onload= "Document.execcommand (' Backgroundimagecache ', false,true); Loadaccess (); " >
<div style= "Position:absolute; z-index:255; left:260px; top:150px "id=" Dflagmeter ">
<table width= "height=" cellspacing= "0" cellpadding= "0" bordercolor= "#000000" border= "0" >
<tbody><tr>
<TD width= "343" valign= "Top" >
<div class= "Progressbar_3" >
<div id= "text" class= "text" > is preparing to load the game footage ...</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style= "Display:none;position:absolute; z-index:254; left:260px; top:150px "id=" DFlagMeter2 "> Loading Success!</div>
<script type= "Text/javascript" >
Levelloadprogress ();
</script>
</body>
