進行状況イベント

進行状況イベントの種類

Progress イベントは、リソースの読み込みの進行状況を記述するために使用されます。これは主に、AJAX リクエスト、<img>、<audio>、<video>、<style> などの外部リソースの読み込みによってトリガーされます。 、<link> などは、ProgressEvent インターフェースを継承します。主に以下のようなイベントが含まれます。

• abort: 外部リソースが読み込みを中止したときにトリガーされます (ユーザーのキャンセルなど)。中止を引き起こすエラーが発生した場合、このイベントは発生しません。
• error: エラーにより外部リソースをロードできないときにトリガーされます。
• load: 外部リソースが正常にロードされたときにトリガーされます。
• loadstart: 外部リソースのロードが開始されるとトリガーされます。
• loadend: 外部リソースの読み込みが停止したときにトリガーされます。発生順序は、error、abort、load などのイベントよりも後です。
• progress: 外部リソースの読み込みプロセス中に継続的にトリガーされます。
• timeout: 読み込みがタイムアウトするとトリガーされます。

これらのイベントは、リソースのダウンロードに加えて、ファイルのアップロードにも存在することに注意してください。

以下に例を示します。

image.addEventListener('load', 関数 (イベント) {
  image.classList.add('終了');
});

image.addEventListener('error', function (event) {
  image.style.display = 'なし';
});

上記のコードは、イメージ要素がロードされた後、イメージ要素に「finished」クラスを追加します。読み込みに失敗した場合は、画像要素のスタイルを非表示に設定してください。

場合によっては、特にスクリプトが Web ページの下部に配置されている場合、スクリプトが実行される前に画像の読み込みが完了することがあります。そのため、「load」イベントと「error」イベントのリスナー関数が実行されない可能性があります。全て。したがって、より信頼性の高い方法は、「c​​omplete」属性を使用して、読み込みが完了したかどうかを最初に判断することです。

関数がロードされました() {
  // ...
}

if (image.complete) {
  ロード済み();
} それ以外 {
  image.addEventListener('load', ロード済み);
}

DOM の要素ノードは読み込みエラーの属性を提供しないため、error イベントのリスニング関数を <img> 要素の HTML コードに配置して、確実にエラーが発生するようにすることが最善です。ロードエラーが発生した場合は 100% 実行されます。

<img src="/wrong/url" onerror="this.style.display='none';" />

loadend イベントの listen 関数は、abort イベント、load イベント、および error イベントのリスニング関数の代わりに使用できます。これは、これらのイベントの後に常に発生するためです。

req.addEventListener('loadend',loadEnd, false);

関数loadEnd(e) {
  console.log('送信が終了しました。成功か失敗は不明');
}

loadend イベント自体は進行状況が終了する理由を提供しませんが、すべての読み込み終了シナリオで必要な一部の操作を実行するために使用できます。

さらに、「error」イベントにはバブルしないという特別な特性があります。したがって、子要素の error イベントは、親要素の error イベント リスニング関数をトリガーしません。

ProgressEvent インターフェース

ProgressEvent インターフェースは主に、AJAX 読み込み、<img>、<video>、<style>、<link>、その他の外部リソース読み込みなどの外部リソース読み込みの進行状況を記述するために使用されます。 。進行状況関連のイベントはすべてこのインターフェイスを継承します。

ブラウザーは、イベント インスタンスを生成するための ProgressEvent() コンストラクターをネイティブに提供します。

新しい ProgressEvent(タイプ、オプション)

ProgressEvent() コンストラクターは 2 つのパラメーターを受け取ります。最初のパラメータはイベントのタイプを示す文字列です。このパラメータは必須です。 2 番目のパラメーターは、イベントの属性を表す構成オブジェクトです。このパラメーターはオプションです。 「Event」インターフェースの構成プロパティに加えて、構成オブジェクトは次のプロパティも使用できます。これらはすべてオプションです。

• lengthComputable: ロードされた合計量を計算できるかどうかを示すブール値。デフォルトは false です。
• loaded: ロードされた量を示す整数。デフォルトは 0 です。
• total: ロードされる合計量を示す整数。デフォルトは 0 です。

ProgressEvent には、対応するインスタンス プロパティがあります。

• ProgressEvent.lengthComputable
• ProgressEvent.loaded
• ProgressEvent.total

「ProgressEvent.lengthComputable」が「false」の場合、「ProgressEvent.total」は実際には意味がありません。

以下に例を示します。

var p = new ProgressEvent('load', {
  長さ計算可能: true、
  ロード済み: 30、
  合計: 100、
});

document.body.addEventListener('load', function (e) {
  console.log('Loaded: ' + (e.loaded / e.total) * 100 + '%');
});

document.body.dispatchEvent(p);
// すでにロードされています: 30%

上記のコードは、最初に load イベントを構築します。このイベントは、スローされた後に listen 関数によってキャッチされます。

ここでは実際的な例を示します。

var xhr = 新しい XMLHttpRequest();

xhr.addEventListener('進捗', updateProgress, false);
xhr.addEventListener('load', transferComplete, false);
xhr.addEventListener('error', transferFailed, false);
xhr.addEventListener('abort', transferCanceled, false);

xhr.open();

関数 updateProgress(e) {
  if (e.lengthComputable) {
    varpercentComplete = e.loaded / e.total;
  } それ以外 {
    console.log('進行状況を計算できません');
  }
}

関数 transferComplete(e) {
  console.log('送信が終了しました');
}

関数 transferFailed(evt) {
  console.log('送信中にエラーが発生しました');
}

関数 transferCanceled(evt) {
  console.log('ユーザーが送信をキャンセルしました');
}

上記はダウンロード処理の進捗イベントですが、アップロード処理の進捗イベントもあります。現時点では、すべてのリスニング関数を XMLHttpRequest.upload オブジェクトに配置する必要があります。

var xhr = 新しい XMLHttpRequest();

xhr.upload.addEventListener('進捗', updateProgress, false);
xhr.upload.addEventListener('load', transferComplete, false);
xhr.upload.addEventListener('error', transferFailed, false);
xhr.upload.addEventListener('abort', transferCanceled, false);

xhr.open();