<!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(‘progressBox‘);
var oDiv2 = document.getElementById(‘progressBar‘);
var oDiv3 = document.getElementById(‘progressText‘);
var iNow=0;
for(var i=0;i<imgs.length;i++)
{
(function(n){
var yImg=new Image();
yImg.src=imgs[i];
yImg.onload=function()
{
var dd=document.createElement("li");
dd.innerHTML="<img src=‘"+yImg.src+"‘/>";
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){//网页加载条
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){//获取样式，兼容
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj)[attr];
}
}
}
}
</script>
</body>
</html>