画像の読み込みに成功した後に JavaScript コールバックを実行するにはどうすればよいですか?

画像の読み込みと JavaScript コールバック

質問: 画像の読み込みが成功したときに JavaScript コールバックを実行するにはどうすればよいですか?あるいは、このタスクを達成する手段はありますか?

回答:

JavaScript で画像読み込みコールバックを実現するにはさまざまな方法があります。 1 つのアプローチには、以下に示すように、.complete プロパティとコールバック関数の利用が含まれます。

JavaScript コード:

var img = document.querySelector('img')

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

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

このアプローチは標準に準拠していますが、外部依存関係を必要とし、不必要な遅延を引き起こしません。 img.complete プロパティが最初にチェックされ、画像がすでにロードされている場合は、コールバックがすぐに実行されます。画像がロードされていない場合は、イベント リスナーが「load」イベントと「error」イベントに追加され、コールバックが適切に実行されることが保証されます。

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