ProgressEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das ProgressEvent-Interface repräsentiert Ereignisse, die den Fortschritt eines zugrunde liegenden Prozesses messen, wie etwa eine HTTP-Anfrage (für ein XMLHttpRequest oder das Laden der zugrunde liegenden Ressource eines <img>, <audio>, <video>, <style> oder <link>).

Konstruktor

ProgressEvent(): Erstellt ein ProgressEvent-Ereignis mit den angegebenen Parametern.

Instanz-Eigenschaften

Erbt außerdem Eigenschaften von seinem Eltern-Interface Event.

ProgressEvent.lengthComputable Schreibgeschützt: Ein Boolean-Flag, das angibt, ob das Verhältnis zwischen der Größe der bereits übertragenen oder verarbeiteten Daten (loaded) und der Gesamtgröße der Daten (total) berechenbar ist. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.
ProgressEvent.loaded Schreibgeschützt: Ein 64-Bit-unsigned Integer, der die Größe in Bytes der bereits übertragenen oder verarbeiteten Daten angibt. Das Verhältnis kann berechnet werden, indem ProgressEvent.total durch den Wert dieser Eigenschaft geteilt wird. Beim Herunterladen einer Ressource über HTTP zählt dies nur den Hauptteil der HTTP-Nachricht und schließt Header und andere Overhead nicht ein. Beachten Sie, dass bei komprimierten Anfragen mit unbekannter Gesamtgröße loaded je nach Browser die Größe der komprimierten oder dekomprimierten Daten enthalten kann. Ab 2024 enthält es in Firefox die Größe der komprimierten Daten und in Chrome die Größe der unkomprimierten Daten.
ProgressEvent.total Schreibgeschützt: Ein 64-Bit-unsigned Integer, der die Gesamtgröße in Bytes der übertragenen oder verarbeiteten Daten angibt. Beim Herunterladen einer Ressource über HTTP wird dieser Wert aus dem Content-Length-Antwortheader übernommen. Es zählt nur den Hauptteil der HTTP-Nachricht und schließt Header und andere Overhead nicht ein.

Instanz-Methoden

Erbt Methoden von seinem Eltern-Interface Event.

Beispiele

Das folgende Beispiel fügt einem neuen XMLHttpRequest ein ProgressEvent hinzu und verwendet es, um den Status der Anfrage anzuzeigen.

const progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = (pe) => {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = (pe) => {
  progressBar.value = pe.loaded;
};
client.send();

Spezifikationen

Specification
XMLHttpRequest # interface-progressevent

Browser-Kompatibilität

Siehe auch

Das Event-Basisinterface.