Wie kann ich beim Laden der Seite mithilfe von XMLHttpRequest-Ereignissen einen laufenden Fortschrittsbalken anzeigen?

Anzeigen eines laufenden Fortschrittsbalkens während des Ladens der Seite

Das Anzeigen eines laufenden Fortschrittsbalkens während des Ladens einer Seite ist ein anderer Ansatz als das Anzeigen eines Es ist ein statisches Ladebild erforderlich. Dies kann durch die Nutzung der vom XMLHttpRequest (XHR)-Objekt bereitgestellten Fortschrittsereignisse erreicht werden.

Im in der Frage bereitgestellten JavaScript-Code wird der window.load()-Ereignis-Listener verwendet, um das Ladebild auszublenden, sobald das Die Seite wurde vollständig geladen. Um einen Fortschrittsbalken zu implementieren, können wir stattdessen die Fortschrittsereignisse des XHR-Objekts nutzen.

Der folgende Codeausschnitt zeigt, wie man XHR-Fortschrittsereignisse verwendet, um einen laufenden Fortschrittsbalken anzuzeigen:

<code class="js">$.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;
        // Update the progress bar here
        console.log(percentComplete);
      }
    }, false);
    // Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar here
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    // Do something success-ish
  }
});</code>

Dieser Code richtet eine XHR-Anfrage mit Fortschrittsereignis-Listenern für den Upload- und Download-Fortschritt ein. Wenn sich der Fortschritt des Uploads oder Downloads ändert, wird der Ereignis-Listener ausgelöst und Sie können Ihren Fortschrittsbalken entsprechend aktualisieren.

Die console.log()-Anweisungen im Code dienen Demonstrationszwecken. Sie können sie durch Ihren eigenen Code ersetzen, der das Erscheinungsbild des Fortschrittsbalkens basierend auf dem „percentComplete“-Wert aktualisiert.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Laden der Seite mithilfe von XMLHttpRequest-Ereignissen einen laufenden Fortschrittsbalken anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!