コールバックを使用して JavaScript で画像の読み込みを処理するにはどうすればよいですか?

コールバックを使用した JavaScript での画像のロード

画像を操作する場合、多くの場合、いつロードが完了したかを知る必要があります。これにより、画像の表示やさらなる処理など、画像の状態に基づいたアクションを実行できるようになります。

コールバック メソッド

JavaScript では、次の一般的なアプローチの 1 つが、画像の読み込みを処理するには、コールバック関数を使用します。コールバックは、画像が完全に読み込まれるなど、特定のイベントが発生したときに呼び出される関数です。

画像要素の .complete プロパティは、その読み込みステータスを示します。画像がすでにロードされている場合は、コールバック関数を直接呼び出すことができます。それ以外の場合は、「onload」イベント リスナーをイメージにアタッチできます。

例を次に示します:

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

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

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

出典: http://www.html5rocks.com/en/tutorials/ es6/promises/

このアプローチを活用すると、イメージの読み込みステータスを確実に判断し、提供されたコールバック関数。

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