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 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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
ProgressEvent
ProgressEvent() constructor
lengthComputable
loaded
total
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

Siehe auch

  • Das Event Basis-Interface.