计算并显示页面加载进度的百分比

我有一个加载器，在页面加载时加载。 我需要显示完成百分比。

我的应用程序包含大量的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加载时间等）并相应地增加进度。

请帮忙解决这个问题..

Answer 1

 function timeout_trigger() { $(".progress").css("max-width",p+"%"); $(".progress-view").text(p+"%"); if(p!=100) { setTimeout('timeout_trigger()', 50); } p++; } timeout_trigger(); 

只有当下载速度更快时，如果下载速度提高1％，此代码才有效。

必须是这样的：

 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(); 

要实现方法getLoaded()您可以使用AJAX事件onprogress （我希望您正在加载文件异步）。 在此处查看监控进度部分https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Answer 2

你可以用这个：

来源： 在加载整个页面之前显示加载栏

脚本

HTML（在正文开头或结尾处）

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; }