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

最新推荐文章于 2023-07-05 11:45:17 发布

陆康永

最新推荐文章于 2023-07-05 11:45:17 发布

阅读量1k

点赞数

分类专栏：瀑布流 +图片预加载+网页加载条

本文链接：https://blog.csdn.net/xiaomogg/article/details/46004759

版权

瀑布流 +图片预加载+网页加载条专栏收录该内容

4 篇文章 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.οnlοad=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>

陆康永

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
预加载2+网页加载条可以直接复制代码运行，如果图片地址丢失的话可以自己替换掉

*{ margin:0; padding:0;} ul{list-style: none;} #progressBox{ width:300px; height:40px; border:1px solid #C8C8C8; background:white; position:relative; margin:200px auto;} #pr
复制链接

扫一扫