ProgressEvent

Konstruktor

ProgressEvent()

Erstellt ein ProgressEvent-Ereignis mit den angegebenen Parametern.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem Elternobjekt Event.

ProgressEvent.lengthComputable Schreibgeschützt

Ein boolesches 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

Eine Zahl, die die Größe der bereits übertragenen oder verarbeiteten Daten angibt. Bei einem ProgressEvent, das vom Browser in HTTP-Nachrichten ausgelöst wird, bezieht sich der Wert auf die Größe des Nachrichtenkörpers in Bytes, exklusive Header und andere Overheads. Bei komprimierten Nachrichten mit unbekannter Gesamtgröße könnte sich loaded auf die Größe der komprimierten oder unkomprimierten Daten beziehen, je nach Browser. Ab 2024 enthält es die Größe der komprimierten Daten in Firefox und der unkomprimierten Daten in Chrome. Bei einem selbst erstellten ProgressEvent können Sie loaded einen beliebigen numerischen Wert zuweisen, der den Fortschritt relativ zum total-Wert repräsentiert.

ProgressEvent.total Schreibgeschützt

Eine Zahl, die die Gesamtgröße der zu übertragenden oder zu verarbeitenden Daten angibt. Bei ProgressEvent, die vom Browser in HTTP-Nachrichten ausgelöst werden, bezieht sich der Wert auf die Größe einer Ressource in Bytes und leitet sich aus dem Content-Length-Header ab. Bei einem selbst erstellten ProgressEvent könnten Sie total auf einen Wert wie 100 oder 1 normieren, falls die exakte Anzahl der Bytes einer Ressource nicht offengelegt werden soll. Wenn Sie zum Beispiel 1 als Gesamtwert verwenden, würde loaded einen dezimalen Wert zwischen 0 und 1 annehmen.

Instanz-Methoden

Erbt Methoden von seinem Elternobjekt, Event.

Beispiele

Status einer Anfrage anzeigen

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();

Verwendung von Bruchteilen in einem ProgressEvent

Die Gesamtanzahl der Bytes einer Ressource könnte zu viele Informationen über eine Ressource preisgeben, daher kann stattdessen eine Zahl zwischen 0 und 1 in einem ProgressEvent() verwendet werden:

function updateProgress(loaded, total) {
  const progressEvent = new ProgressEvent("progress", {
    lengthComputable: true,
    loaded,
    total,
  });

  document.dispatchEvent(progressEvent);
}

document.addEventListener("progress", (event) => {
  console.log(`Progress: ${event.loaded}/${event.total}`);
});

updateProgress(0.123456, 1);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Event Basisschnittstelle.