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.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

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

Event ProgressEvent

Konstruktor

ProgressEvent()

Erstellt ein ProgressEvent-Ereignis mit den angegebenen Parametern.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event.

ProgressEvent.lengthComputable Nur lesbar

Ein boolesches Kennzeichen, das anzeigt, ob das Verhältnis zwischen der bereits übertragenen oder verarbeiteten Datenmenge (loaded) und der Gesamtdatenmenge (total) berechenbar ist. Mit anderen Worten, es gibt an, ob der Fortschritt messbar ist oder nicht.

ProgressEvent.loaded Nur lesbar

Eine 64-Bit-Integer, die 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 unbekannter Gesamtgröße loaded die Größe der komprimierten oder dekomprimierten Daten enthalten kann, abhängig vom Browser. Ab 2024 enthält es die Größe der komprimierten Daten in Firefox und die Größe der unkomprimierten Daten in Chrome.

ProgressEvent.total Nur lesbar

Eine 64-Bit-Integer, die die Gesamtgröße in Bytes der übertragenen oder verarbeiteten Daten angibt. Beim Herunterladen einer Ressource über HTTP wird dieser Wert aus dem Content-Length Antwort-Header entnommen. Es zählt nur den Hauptteil der HTTP-Nachricht und schließt Header und anderen Overhead nicht ein.

Instanz-Methoden

Erbt Methoden von seinem Elternteil, Event.

Beispiele

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

js
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 Standard
# interface-progressevent

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Das Event Basis-Interface.