我有一个加载器,它在页面开始加载时加载。我需要显示其中的完成百分比。
我的应用程序包含大量 jquery 和 css,并且还包含 ajax 调用。
到目前为止,我已经在页面加载开始时显示进度条,并在 ajax 成功完成时隐藏它。
另外,我已经显示了百分比,但使用以下代码手动增加了它:
function timeout_trigger() {
$(".progress").css("max-width", p + "%");
$(".progress-view").text(p + "%");
if (p != 100) {
setTimeout('timeout_trigger()', 50);
}
p++;
}
timeout_trigger();
这里的问题是,在进度达到 100 之前,页面加载并显示内容,因此加载器隐藏在中间,比如说 - 在 60% 时 - 加载器被隐藏。
我想动态计算页面加载完成的百分比(即jquery加载时间、css加载时间等)并相应地增加进度。
请帮助解决这个问题..
你可以使用这个:
Source: 在整个页面加载之前显示加载栏
Script
<script>
;(function(){
function id(v){ return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
img = document.images,
c = 0,
tot = img.length;
if(tot == 0) return doneLoading();
function imgLoaded(){
c += 1;
var perc = ((100/tot*c) << 0) +"%";
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot) return doneLoading();
}
function doneLoading(){
ovrl.style.opacity = 0;
setTimeout(function(){
ovrl.style.display = "none";
}, 1200);
}
for(var i=0; i<tot; i++) {
var tImg = new Image();
tImg.onload = imgLoaded;
tImg.onerror = imgLoaded;
tImg.src = img[i].src;
}
}
document.addEventListener('DOMContentLoaded', loadbar, false);
}());
</script>
HTML(在正文的开头或末尾)
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
CSS
#overlay{
position:fixed;
z-index:99999;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.9);
transition: 1s 0.4s;
}
#progress{
height:1px;
background:#fff;
position:absolute;
width:0;
top:50%;
transition: 1s;
}
#progstat{
font-size:0.7em;
letter-spacing: 3px;
position:absolute;
top:50%;
margin-top:-40px;
width:100%;
text-align:center;
color:#fff;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)