Zeige Fortschrittsbalken beim Laden von Seiten mit Jquery Ajax in einzelne Seite Website

Question

Ich habe eine grundlegende Seite mit einer Navigationsleiste oben und einem Wrapper Körper.

Wenn ein Benutzer auf einen Navigationslink klickt, wird .load verwendet, um den Seiteninhalt in das Wrapper-div zu laden.

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

Beispiel für Rückgabewert von .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> 

Wie Sie sehen können, habe ich ein Bootstrap Fortschrittsbalken, die mich auf ajaxstart() zeigen, und auf der Seite, die ich mich diesen Wert ändern nennen Der Fortschrittsbalken nach dem Laden jedes Elements.

Dies funktioniert gut in Firefox und ich kann die Fortschrittsanzeige sehen, während auf die Seite geladen wird, aber es funktioniert nicht in Chrome oder IE.

Gibt es einen besseren Weg, dies zu tun? Mache ich das richtig oder gibt es eine andere Methode, dies zu tun?

Zum Beispiel $.ajax Seitengröße in kb erhalten und Fortschrittsbalken im laufenden Betrieb aktualisieren, wie Daten empfangen werden?

Ich versuche etwas Ähnliches wie die Lade-Seite zu erstellen, wenn Gmail geladen wird.

Answer 1

Erlauben Sie mir, Sie zu this page beziehen, desribes es, wie Sie einen progress event Zuhörer zum xhr Objekt hinzufügen können (die in these browsers funktioniert nur, in älteren Browsern müssen Sie einfach auf der gleichen Basis verlassen Sie derzeit verwenden) in Jquery.

Als Referenz ich den entsprechenden Code unten kopiert haben (würden Sie nur in den ‚Download Fortschritt‘ Teil interessieren wahrscheinlich):

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

Erlauben Sie mir jedoch zu sagen, dass dies eine Menge Overkill ist für eine einzelne Seite Website und nur wirklich nützlich für große Dateien. Außerdem werden Bilder und ähnliche Medien nicht auf diese Weise behandelt, und Sie müssten das Laden von Bildern überwachen (oder es selbst über Ajax tun), um ein solches System perfekt zu machen.

hier ein JSFiddle zeigt dies in Aktion ist: http://jsfiddle.net/vg389mnv/1/

Answer 2

Die obige Antwort richtig ist (upvoted). Eine benutzerdefinierte xhr Anfrage funktioniert gut, ich habe es mit Ihrem Code getestet könnte es (und eine größere Datei tatsächlichen Fortschritt zu sehen) und kopieren Sie hier:

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

});