计算&显示页面加载进度的百分比 [英] Calculate & Display percentage of progress of page load

问题描述

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

我的应用程序包含很多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之前，页面加载并显示内容，因此我想要计算页面加载完成的百分比（即.jquery加载时间，百分比，加载时间， css加载时间等）动态并相应地增加进度。

请帮助解决这个问题..

解决方案

function timeout_trigger（）{
$（。progress）。css（max-width，p +％）
$（。progress-view）。text（p +％）;
if（p！= 100）{
setTimeout（'timeout_trigger（）'，50）;
}
p ++;
}
timeout_trigger（）;


如果下载速度更快，此代码仅适用于每50ms下载1％的内容 - 如果失败。

它必须是这样的：

  var size = file.getsize（）; //文件大小
 
函数timeout_trigger（）{
 var loaded = file.getLoaded（）; //加载部分
 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

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.

As of now, I have displayed the progress bar when page load starts and hided it when the ajax completed successfully.

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.

I want to calculate the percentage of page load completion (ie. jquery loading time, css loading time etc) dynamically and increase the progress accordingly.

Please help to get through this..

解决方案

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.

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 Progress part here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

这篇关于计算&显示页面加载进度的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！