预加载2+网页加载条可以直接复制代码运行，如果图片地址丢失的话可以自己替换掉

时间：2015-05-26 12:52:15 阅读：170 评论：0 收藏：0 [点我收藏+]

标签：

<!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>

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>

预加载2+网页加载条可以直接复制代码运行，如果图片地址丢失的话可以自己替换掉

标签：

原文地址：http://blog.csdn.net/xiaomogg/article/details/46004759

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

预加载2+网页加载条 可以直接复制代码运行，如果图片地址丢失的话可以自己替换掉

预加载2+网页加载条可以直接复制代码运行，如果图片地址丢失的话可以自己替换掉