hiển thị thanh tiến trình trong khi tải các trang bằng cách sử dụng jquery ajax trong trang web đơn

Question

Tôi có một trang cơ bản với thanh điều hướng ở trên cùng và một thân máy bao bọc.

Bất cứ khi nào người dùng nhấp vào liên kết điều hướng, nó sử dụng .load để tải nội dung trang vào div trình bao bọc.

$(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();}); 
}); 

Ví dụ về giá trị trả về từ .load:

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

Như bạn thấy, tôi có một thanh tiến trình Bootstrap mà tôi hiển thị trên ajaxstart(), và trên trang mà tôi gọi tôi sửa đổi mà giá trị của thanh tiến trình sau mỗi mục được tải.

Tính năng này hoạt động tốt trên Firefox và tôi có thể thấy thanh tiến trình trong khi chờ trang tải, nhưng nó không hoạt động trên Chrome hoặc IE.

Có cách nào tốt hơn để thực hiện việc này không? Tôi đang làm điều này một cách chính xác hoặc là có một phương pháp để làm điều này?

Ví dụ: nhận được $.ajax kích thước trang tính bằng kb và cập nhật thanh tiến trình khi đang nhận dữ liệu?

Tôi đang cố tạo một thứ tương tự như trang Đang tải khi Gmail đang tải.

Answer 1

Cho phép tôi giới thiệu bạn đến this page, nó desribes làm thế nào bạn có thể thêm một người biết lắng nghe progress event đến đối tượng XHR (mà chỉ hoạt động trong these browsers, trong các trình duyệt cũ hơn, bạn chỉ cần có dựa trên cơ sở tương tự như bạn đang sử dụng) trong jquery.

Để tham khảo tôi đã sao chép đoạn mã có liên quan bên dưới (bạn sẽ chỉ được quan tâm trong 'Download tiến bộ' phần lẽ):

$.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 
    } 
}); 

Đừng cho phép tôi nói rằng mặc dù đây là một rất nhiều quá mức cần thiết cho một trang web duy nhất và chỉ thực sự trở nên hữu ích cho các tệp lớn. Ngoài ra hình ảnh và phương tiện truyền thông tương tự không được xử lý theo cách này và bạn sẽ cần phải theo dõi tải hình ảnh (hoặc làm điều đó cho mình thông qua ajax) để làm cho một hệ thống như vậy hoàn hảo.

Đây là một JSFiddle hiển thị này trong hành động: http://jsfiddle.net/vg389mnv/1/

Answer 2

Câu trả lời trên là chính xác (upvoted). Yêu cầu xhr tùy chỉnh hoạt động tốt, tôi đã thử nghiệm mã của bạn (và tệp lớn hơn để xem tiến trình thực tế), cũng có thể sao chép nó tại đây:

$('.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(); 
     } 
    }); 

});