ブラウザーのキャッシュがある場合でも、イメージの「onload」イベントが確実に発生するようにするにはどうすればよいですか?

キャッシュされた画像の読み込みとブラウザ キャッシュ

画像の読み込み後にアラートを表示しようとすると、次の場合に .onload イベントがトリガーされないことがあります。画像はブラウザにキャッシュされました。キャッシュに関係なくアラートが表示されるようにするには、いくつかの方法があります。

ソースの前に onload プロパティを設定する

ソース (src) を設定する前に .onload プロパティを構成する画像の。これにより、ブラウザが画像のキャッシュをチェックする前に onload イベント リスナーが登録されるようになります。

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

jQuery イベント ハンドラーの利用

または、jQuery の .on を利用します。 ('load') イベント ハンドラ。このメソッドは、動的に生成された画像に対して特に効果的です。

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

どちらのメソッドも、画像がキャッシュされているかどうかに関係なく、アラート イベントを効果的にトリガーします。イベント登録の順序を変更するか、jQuery を利用することで、画像がブラウザーのキャッシュに存在する場合でも、.onload イベントを確実に起動できます。

以上がブラウザーのキャッシュがある場合でも、イメージの「onload」イベントが確実に発生するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。