Pre-load 2 + web page load entries can be directly copied to run the Code, if the image address is lost, you can replace it yourself, pre-load
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style>
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
# ProgressBox {width: 300px; height: 40px; border: 1px solid # C8C8C8; background: white; position: relative; margin: 200px auto ;}
# ProgressBar {position: absolute; left: 0; top: 0; z-index: 2; height: 40px; width: 100%; line-height: 40px; color: white; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia; clip: rect (0px, 0, 40px, 0px); background: #00A1F5 ;}
# ProgressText {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; color: black; text-align: center; font-size: 20px; font-weight: bold; font-family: Georgia ;}
# ImgList {display: none ;}
Body {width: 100% ;}
Ul {width: 100% ;}
Img {display: block; width: 100%; height: 100% ;}
</Style>
</Head>
<Body>
<Div id = "progressBox">
<Div id = "progressBar"> 0% </div>
<Div id = "progressText"> 0% </div>
</Div>
<Ul id = "imgList"> </ul>
<Script type = "text/javascript">
Var imgs = ["http://www.wallcoo.com/nature/da_ps_landscape_01/wallpapers/1680x1050/%5Bwallcoo_com%5D_April_23rd.jpg ",
"Http://pic5.bbzhi.com/chuangyibizhi/zuixinchuangyishejibizhi/zuixinchuangyishejibizhi_415791_11.jpg ",
"Http://img.bz1111.com/d3/2010-10/2010103021073576056.jpg ",
"Http://www.pp3.cn/uploads/20120627gj/bz_gj_05.jpg ",
"Http://www.onegreen.net/Article/UploadFiles/200811/2008111874946653.jpg ",
"Http://lib.nit.net.cn/dlib/resource/jpg/1889.jpg ",
Http://www.lwdx.cn/UploadFiles/Photo/2009/2/bizhi/stzw20081005/stzw20081005_001.jpg"
];
Var ul1 = document. getElementById ('imglist ');
Var oDiv1 = document. getElementById ('ssssbox ');
Var oDiv2 = document. getElementById ('ssssbar ');
Var oDiv3 = document. getElementById ('ssstext ');
Var iNow = 0;
For (var I = 0; I {
(Function (n ){
Var yImg = new Image ();
YImg. src = imgs [I];
YImg. onload = function ()
{
Var dd = document. createElement ("li ");
Dd. innerHTML = " ";
Ul1.appendChild (dd );
INow ++;
// Alert (I );
ProgressFn (parseInt (iNow/(imgs. length-1) * 100 ));
If (iNow = (imgs. length-1 )){
ODiv2.style. display = 'block ';
Ul1.style. display = "block ";
ODiv1.style. display = 'none ';
}
};
} (I ));
Function progressFn (cent) {// webpage loading entry
Var allWidth = parseInt (getStyle (oDiv1, 'width '));
ODiv2.innerHTML = cent + '% ';
ODiv3.innerHTML = cent + '% ';
ODiv2.style. clip = 'rect (0px, '+ cent * (allWidth/100) + 'px, 40px, 0px )';
Function getStyle (obj, attr) {// gets the style, compatible
If (obj. currentStyle ){
Return obj. currentStyle [attr];
}
Else {
Return getComputedStyle (obj) [attr];
}
}
}
}
</Script>
</Body>
</Html>