JavaScript で画像ロード イベントを処理するコールバックを実装するにはどうすればよいですか?

画像読み込みイベントのコールバックを実装する

Web アプリケーションで画像を操作する場合、特定の機能にとって読み込みがいつ完了したかを知ることが重要になります。これを効率的に実現する方法は、コールバックを使用することです。この記事では、画像の読み込みが完了したらすぐに JavaScript コールバックを実行する方法について説明します。

コールバックで .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');
  });
}

このコード スニペットは、まず .complete プロパティを調べて、画像が既に読み込まれているかどうかを確認します。 true の場合、loaded() コールバックがすぐに呼び出されます。 false の場合、イベント リスナーはロード イベントとエラー イベントにアタッチされ、それぞれコールバックとエラー処理を処理します。

このメソッドは信頼性が高く、イメージが完全にロードされるとすぐにコールバックが実行されることが保証されます。不必要な待ち時間を最小限に抑えます。

以上がJavaScript で画像ロード イベントを処理するコールバックを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。