画像が JavaScript に読み込まれた後にコールバック関数を実行するにはどうすればよいですか?

コールバックを使用してイメージのロードを処理する別の方法

イメージをロードするとき、いつ完了したかを知ることは、特定の機能を実装するために重要です。 。この質問では、JavaScript での画像のロード時にコールバックを実行するためのオプションについて説明します。

解決策 1: .complete Callback

信頼性の高い標準準拠のアプローチには、.complete の使用が含まれます。プロパティとコールバック関数。 .complete は、画像の読み込みがすでに終了しているかどうかをチェックし、該当する場合はコールバックがすぐにトリガーされるようにします。

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
      alert('error');
  });
}

このコード:

1. img を使用して画像要素を初期化します。
2. 画像のロードを処理するためにロードされるコールバック関数を定義します。
3. 画像が.complete を使用してすでに完了しています。
4. 完了した場合は、すぐにコールバックを呼び出します。
5. 完了していない場合は、「load」(ロード時にコールバックを実行するため) と「error」の両方のイベント リスナーをアタッチします。 ' (読み込み失敗を通知するため).

追加注

このアプローチは、イメージの準備ができるとすぐにコールバックをトリガーするため、非常に効率的であり、イベント リスナーの待機によって引き起こされる不要な遅延を回避します。主要なブラウザでもサポートされており、簡単なエラー処理が可能です。

以上が画像が JavaScript に読み込まれた後にコールバック関数を実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。