構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("load", (event) => { }) onload = (event) => { } イベント型
ProgressEvent です。 Event から継承しています。
イベントプロパティ
親である Event からプロパティを継承しています。
lengthComputable読取専用-
論理値のフラグで、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が計測可能かどうかを示します。
loaded読取専用-
64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、
totalをこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。 total読取専用-
64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは
Content-Length（メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。
例
XMLHttpRequest での使い方
HTML
html
<div class="controls"> <input class="xhr success" type="button" name="xhr" value="クリックで XHR 開始（成功）" /> <input class="xhr error" type="button" name="xhr" value="クリックで XHR 開始（エラー）" /> <input class="xhr abort" type="button" name="xhr" value="クリックで XHR 開始（中止）" /> </div> <textarea readonly class="event-log"></textarea> JavaScript
js
const xhrButtonSuccess = document.querySelector(".xhr.success"); const xhrButtonError = document.querySelector(".xhr.error"); const xhrButtonAbort = document.querySelector(".xhr.abort"); const log = document.querySelector(".event-log"); function handleEvent(e) { log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`; } function addListeners(xhr) { xhr.addEventListener("loadstart", handleEvent); xhr.addEventListener("load", handleEvent); xhr.addEventListener("loadend", handleEvent); xhr.addEventListener("progress", handleEvent); xhr.addEventListener("error", handleEvent); xhr.addEventListener("abort", handleEvent); } function runXHR(url) { log.textContent = ""; const xhr = new XMLHttpRequest(); addListeners(xhr); xhr.open("GET", url); xhr.send(); return xhr; } xhrButtonSuccess.addEventListener("click", () => { runXHR("image.jpg"); }); xhrButtonError.addEventListener("click", () => { runXHR("https://somewhere.org/i-dont-exist"); }); xhrButtonAbort.addEventListener("click", () => { runXHR("image.jpg").abort(); }); 結果
XMLHttpRequestUpload での使い方
load イベントを使用すると、アップロードが正常に終了したことを検出することができます。ファイルをアップロードしてプログレスバーを表示する完全なコード例については、メインの XMLHttpRequestUpload ページを参照してください。
js
// アップロードが完了したら、プログレスバーを非表示にする xhr.upload.addEventListener("load", (event) => { progressBar.classList.remove("visible"); log.textContent = "Upload finished."; abortButton.disabled = true; }); 仕様書
| Specification |
|---|
| XMLHttpRequest # event-xhr-load |
| XMLHttpRequest # handler-xhr-onload |
ブラウザーの互換性
api.XMLHttpRequest.load_event
Loading…
api.XMLHttpRequestUpload.load_event
Loading…