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

Question

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

我的应用程序中有很多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％每50毫秒，如果下载是快这段代码只会工作 - 如果将失败。

它必须是这样的：

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

您可以使用此：

来源：Display a loading bar before the entire page is loaded

脚本

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