在瀏覽器加載任何內容之前加載加載欄

Question

我正在使用引導程序，並且希望將帶有百分比的引導程序進度欄放入頁面加載，以及何時進度欄寬度達到瀏覽器中顯示的頁面的100％。我怎樣才能做到這一點？我有一個的jsfiddle鏈接Jsfiddle但引導進度條的樣本如何，我可以將它設置爲頁面加載

var progress = setInterval(function() { 
    var $bar = $('.bar'); 

    if ($bar.width() >= 400) { 
     clearInterval(progress); 
     $('.progress').removeClass('active'); 
    } else { 
     $bar.width($bar.width() + 40); 
    } 
    $bar.text($bar.width()/4 + "%"); 
}, 800); 

Answer 1

你可以花費的時間量加載，就像這樣：

//Gets the loading time in milliseconds 
    var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; 
    //Start time 
    var timestart= (new Date).getTime(); 

    var progress = setInterval(function() { 
     var time = ((new Date).getTime() - timestart)/10; 
     var $bar = $('.bar'); 
     var width=Math.round((((time*400)/loadTime)*100)/400); 
     if (width >= 100) { 
      clearInterval(progress); 
      $('.progress').removeClass('active'); 
     } 
     width=width>100?100:width; 
     $bar.width(width+"%"); 
     $bar.text(width+"%"); 
    }, 1000/10);