Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-10-30 21:13:30
Original
385 Leute haben es durchsucht

How to Display a Running Progress Bar During Page Load Using JavaScript?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage