キャッシュされたイメージでも onload イベントが確実に発生するようにするにはどうすればよいですか?

onload イベントによる画像の読み込みとブラウザ キャッシュの移動

画像の onload イベントは、画像が正常に読み込まれたときにアクションを実行するために不可欠です。ただし、ブラウザーに保存されているキャッシュされた画像を処理する場合、イベントは制限に遭遇する可能性があります。この記事では、この問題を解決し、onload イベントを一貫してトリガーする方法について説明します。

課題: キャッシュされた画像と onload イベント

Web 開発では、onload イベントは次のとおりです。 に添付されています。要素が追加され、画像が完全にロードされたときにトリガーされます。これにより、開発者は、画像がユーザーに表示された後に特定のタスクを実行できるようになります。ただし、ブラウザにキャッシュされたキャッシュ イメージはこのイベントをバイパスでき、その結果、キャッシュ イメージのシナリオではアラートが表示されません。

解決策 1: src を追加する前に onload を設定する

キャッシュのステータスに関係なく onload イベントがトリガーされるようにするには、コード シーケンスを変更します。 onload イベントの前に src 属性を設定する代わりに、最初に onload 関数を定義します。これにより、ブラウザーは画像をロードしようとする前にイベント ハンドラーを登録できます。

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

解決策 2: jQuery のロード イベントを使用する

別のアプローチには、 jQuery は、広く採用されている JavaScript ライブラリです。 jQuery のロード イベントは、キャッシュされたイメージのシナリオで標準の onload イベントがトリガーされない場合の解決策を提供します。次のコードは、この手法を示しています。

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

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