Javascript 计算并显示页面加载进度百分比
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33820979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculate & Display percentage of progress of page load
提问by user3211705
I have a loader which loads when page loads at the starting. I need to show the percentage of completion in it.
我有一个加载器,它在页面开始加载时加载。我需要在其中显示完成百分比。
My application has lots of jquery and css included in it and it also include a ajax call.
我的应用程序中包含大量 jquery 和 css,它还包含一个 ajax 调用。
As of now, I have displayed the progress bar when page load starts and hided it when the ajax completed successfully.
到目前为止,我已经在页面加载开始时显示了进度条,并在 ajax 成功完成时隐藏了它。
Also, I have displayed the percentage but increased it manually using the below code:
另外,我已经显示了百分比,但使用以下代码手动增加了它:
function timeout_trigger() {
$(".progress").css("max-width", p + "%");
$(".progress-view").text(p + "%");
if (p != 100) {
setTimeout('timeout_trigger()', 50);
}
p++;
}
timeout_trigger();
The problem here is, before the progress reaches 100, the page loads and the content is displayed and hence the loader is hided in between let say - at 60% - the loader is hided.
这里的问题是,在进度达到 100 之前,页面加载并显示内容,因此加载器隐藏在中间,比如说 - 在 60% - 加载器被隐藏。
I want to calculate the percentage of page load completion (ie. jquery loading time, css loading time etc) dynamically and increase the progress accordingly.
我想动态计算页面加载完成的百分比(即 jquery 加载时间、css 加载时间等)并相应地增加进度。
Please help to get through this..
请帮助解决这个问题..
采纳答案by Andrew Evt
function timeout_trigger() {
$(".progress").css("max-width",p+"%");
$(".progress-view").text(p+"%");
if(p!=100) {
setTimeout('timeout_trigger()', 50);
}
p++;
}
timeout_trigger();
This code will work only when you download 1% per 50ms, if download goes faster - if will fail.
此代码仅在您每 50 毫秒下载 1% 时有效,如果下载速度更快 - 如果会失败。
It must be something like this:
它必须是这样的:
var size = file.getsize(); // file size
function timeout_trigger() {
var loaded = file.getLoaded(); // loaded part
p = parseInt(loaded / size);
$(".progress").css("max-width",p+"%");
$(".progress-view").text(p+"%");
if(p!=100) {
setTimeout('timeout_trigger()', 20);
}
}
timeout_trigger();
To realise method getLoaded()
you can use AJAX event onprogress
(I hope you are loading files async). Check Monitoring Progresspart here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
要实现方法,getLoaded()
您可以使用 AJAX 事件onprogress
(我希望您正在异步加载文件)。在此处检查监控进度部分https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
回答by Anshul Mishra
You can use this:
你可以使用这个:
Source: Display a loading bar before the entire page is loaded
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 (At the starting of body or at the end)
HTML(在正文的开头或结尾)
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
CSS
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;
}