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.

ProgressEvent インターフェイスは、プロセスの進捗、例えば HTTP リクエスト(XMLHttpRequest、または <img>, <audio>, <video>, <style>, <link> のような基本的なリソースの読み込み)などを計測するイベントを表します。

Event ProgressEvent

コンストラクター

ProgressEvent()

指定した引数で ProgressEvent イベントを作成します。

インスタンスプロパティ

親である Event から継承したプロパティもあります。

ProgressEvent.lengthComputable 読取専用

論理値のフラグで、基礎となるプロセスで行われる作業の合計と、既に行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が測定可能かどうかを示します。

ProgressEvent.loaded 読取専用

64 ビット符号なし整数値で、基礎となるプロセスで既に実行された作業の量を示す。行われた作業の比率は、 total でこのプロパティの値を割ることで計算できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。

ProgressEvent.total 読取専用

64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表す。 HTTP でリソースをダウンロードする場合、これは Content-Length (メッセージの本文のサイズ)であり、ヘッダーやその他のオーバーヘッドは含まれません。

インスタンスメソッド

親である Event からメソッドを継承しています。

以下の例は ProgressEvent を新しい XMLHTTPRequest に追加し、リクエストの状態を表示するために使用します。

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

仕様書

Specification
XMLHttpRequest
# interface-progressevent

ブラウザーの互換性

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

関連情報

  • 基本インターフェイスの Event