在單頁面網站中使用jquery ajax加載頁面時顯示progressbar

Question

我有一個基本頁面，頂部有一個導航欄和一個包裝體。

只要用戶點擊導航鏈接，它就會使用.load將頁面內容加載到包裝div中。從.load返回值的

$(this).ajaxStart(function(){$('.progressbar .bar').css('width','5%');$('.progressbar').fadeIn();}); 
$(this).ajaxEnd(function(){$('progressbar').hide();}); 

$('.ajaxspl').on('click',function(e){ 
    e.preventDefault(); 

    var url=$(this).data('url'), 
     wrap=$('body #wrap'); 

    //clean the wrapper 
    wrap.slideUp().html(''); 

    //load page into wrapper 
    wrap.load(url,function(){wrap.slideDown();}); 
}); 

例子：

<div> 
...content 
</div> 
<script>$('.progressbar .bar').css('width','30%');</script> 
<link href="/assets/css/datepicker.css" rel="stylesheet" /> 
<script>$('.progressbar .bar').css('width','60%');</script> 
<link href="/assets/css/main.css" rel="stylesheet" /> 
<script>$('.progressbar .bar').css('width','90%');</script> 
<script>//blah blah</script> 

正如你所看到的，我有一個引導進度條，我表現出對ajaxstart()，而我所說的頁面上我修改的那個值每個項目後的進度條被加載。

這很適用於Firefox，我可以在等待頁面加載時看到進度條，但它在Chrome或IE上不起作用。

有沒有更好的方法來做到這一點？我是否正確地做了這件事，還是有另一種方法來做到這一點？

例如，獲取$.ajax頁面大小（KB），並隨着數據的接收即時更新進度條？

我試圖在加載Gmail時生成類似於加載頁面的內容。

Answer 1

請允許我向您推薦this page，它desribes如何添加一個progress event監聽到XHR對象（僅適用於these browsers，在舊的瀏覽器，你只需依靠您正在使用相同的基礎上）在jQuery的。

僅供參考我抄在下面的相關代碼（你只感興趣可能是「下載進度」部分）：

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
}); 

請允許我說，雖然這是一個對於很多矯枉過正一個單一的網頁網站，只有真正成爲大文件有用。此外，圖像和類似媒體不以這種方式處理，您需要監視圖像的加載（或通過ajax自己做），以使這樣的系統更完美。

這裏是示出動作這一個的jsfiddle：http://jsfiddle.net/vg389mnv/1/

Answer 2

以上回答是正確的（upvoted）。自定義XHR請求運作良好，我與你的代碼測試它（和更大的文件，看看實際進度），可能會在這裏以及複製：

$('.ajaxspl').on('click',function(e){ 
    e.preventDefault(); 

    var url=$(this).data('url'), wrap=$('body #wrap'); 

    //clean the wrapper 
    wrap.slideUp().html(''); 

    //load page into wrapper 
    console.log('starting ajax request'); 
    $.ajax({ 
     xhr: function() { 
      var xhr = new window.XMLHttpRequest(); 
      xhr.addEventListener('progress', function(e) { 
       if (e.lengthComputable) { 
        $('.progressbar .bar').css('width', '' + (100 * e.loaded/e.total) + '%'); 
       } 
      }); 
      return xhr; 
     }, 
     type: 'POST', 
     url: url, 
     data: {}, 
     complete: function(response, status, xhr) { 
      console.log(response) 
      wrap.html(response.responseText); 
      wrap.slideDown(); 
     } 
    }); 

});