Wie zeige ich mit JavaScript beim Laden einer Seite einen laufenden Fortschrittsbalken an?

Anzeige eines laufenden Fortschrittsbalkens während des Ladens der Seite

Um einen laufenden Fortschrittsbalken während des Ladens Ihrer Seite zu erhalten, können Sie XMLHttpRequest (XHR )-Objekt in JavaScript. Das XHR-Objekt stellt Fortschrittsereignisse bereit, mit denen Sie den Upload- und Download-Fortschritt einer Anfrage überwachen können.

Hier ist ein Beispiel mit jQuery zum Einrichten des Fortschrittsbalkens:

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

In diesem Skript erstellt die xhr-Funktion ein neues XMLHttpRequest-Objekt und registriert Ereignis-Listener für den Upload- und Download-Fortschritt. Diese Ereignis-Listener sind für die Berechnung und Aktualisierung des Fortschrittsbalkens basierend auf dem Prozentsatz der übertragenen Daten verantwortlich.

Damit dies mit Ihrem vorhandenen Code funktioniert, müssen Sie Ihre Funktion $(window).load durch ersetzen der obige $.ajax-Aufruf. Stellen Sie sicher, dass die URL- und Datenparameter für Ihre Anfrage entsprechend eingestellt sind.

Denken Sie daran, den Fortschrittsbalken mit CSS zu formatieren, um ihm eine visuelle Darstellung zu geben. Sie können Breite, Höhe, Farbe und Animation an Ihre Designvorlieben anpassen.

Das obige ist der detaillierte Inhalt vonWie zeige ich mit JavaScript beim Laden einer Seite einen laufenden Fortschrittsbalken an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!