網站內容加載，進度條

Question

我在網站加載進度條有問題。我在下面的腳本中使用進度條，但它在Web服務器www.example.com中不能正常工作，網站是在web服務器上進行的，但是問題在於當我打開網站後，進度條會在一段時間後啓動。

我打開網站時如何啓動進度條？

謝謝。嘗試使用，而不是

$(window).load(function(){ 
    var width = 100, 
    perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page. 
    EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart), 
    time = parseInt((EstimatedTime/1000)%60)*100; 

    // Loadbar Animation 
    $(".loadbar").animate({ 
     width: width + "%" 
    }, time); 

    // Loadbar Glow Animation 
    $(".glow").animate({ 
     width: width + "%" 
    }, time); 

    // Percentage Increment Animation 
    var PercentageID = $("#precent"), 
     start = 0, 
     end = 100, 
     durataion = time; 
     animateValue(PercentageID, start, end, durataion); 

    function animateValue(id, start, end, duration) { 

     var range = end - start, 
      current = start, 
      increment = end > start? 1 : -1, 
      stepTime = Math.abs(Math.floor(duration/range)), 
      obj = $(id); 

     var timer = setInterval(function() { 
     current += increment; 
     $(obj).text(current + "%"); 
      //obj.innerHTML = current; 
     if (current == end) { 
      clearInterval(timer); 
     } 
     }, stepTime); 
    } 

    // Fading Out Loadbar on Finised 
    setTimeout(function(){ 
     $('.preloader-wrap').fadeOut(300); 
    }, time); 

}); 

Answer 1

$(document).ready(function(){$(window).load(function(){

HTML文檔加載後會發生ready事件， 而onload事件後，當所有的內容（例如圖像） 也有發生已加載。

ready事件的目的是 它應該在文檔加載後儘早出現，所以 那個爲頁面中的元素添加功能的代碼並不是 必須等待所有內容加載。

貸Guffa回答this question

所以它不是等待圖像等被加載。僅適用於加載速度非常快的HTML文檔。 您的代碼應該是這樣的，那麼：

$(document).ready(function(){ 
    // all your other code  
}); 

---

編輯： 嘗試使用此代碼：

$(document).ready(function(){ 
    var width = 100, 
     perfData = window.performance.timing, 
     EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart), 
     time = parseInt((EstimatedTime/1000)%60)*100; 

    $(".loadbar").animate({ 
    width: width + "%" 
    }, time); 

    $(".glow").animate({ 
    width: width + "%" 
    }, time); 

    var PercentageID = $("#precent"), 
     start = 0, 
     end = 100, 
     durataion = time; 
     animateValue(PercentageID, start, end, durataion); 

    function animateValue(id, start, end, duration) { 

    var range = end - start, 
     current = start, 
     increment = end > start? 1 : -1, 
     stepTime = Math.abs(Math.floor(duration/range)), 
     obj = $(id); 

    var timer = setInterval(function() { 
     current += increment; 
     $(obj).text(current + "%"); 
     if (current == end) { 
     clearInterval(timer); 
     } 
    }, stepTime); 
    } 

    $(window).load(function(){ 
    $('.preloader-wrap').fadeOut(300); 
    $('.wrap').fadeIn(300); 
    }); 
}); 

的唯一條件得到那個工作，就是你把你所有的內容裏面的.wrap div