計算和顯示頁面加載進度的百分比

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