image.onloadイベントとブラウザキャッシュ

画像が読み込まれた後に警告ボックスを作成したいのですが、画像がブラウザのキャッシュに保存されていると、.onloadイベントが発生しません。

画像がキャッシュされているかどうかに関係なく、画像が読み込まれたときにアラートをトリガーするにはどうすればよいですか？

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

画像を動的に生成するため、のonload前にプロパティを設定しますsrc。

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

Fiddle-最新のFirefoxおよびChromeリリースでテスト済み。

この投稿の回答を使用することもできます。これは、動的に生成された単一の画像に適応しました。

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

フィドル

srcが既に設定されている場合、イベントハンドラーがバインドされる前に、キャッシュされたケースでイベントが発生しています。したがって、オフに.completeも基づいてイベントをトリガーする必要があります。

コードサンプル：

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

このような状況には2つの解決策があります。

1. この投稿で提案されたソリューションを使用してください

2. 画像srcに一意のサフィックスを追加して、ブラウザに次のように強制的に再度ダウンロードさせます。

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

このコードでは、画像のURLの末尾に現在のタイムスタンプを追加するたびに一意にすると、ブラウザーが画像を再度ダウンロードします

今日、同じ問題に会いました。さまざまな方法を試した後、サイジングのコードを内部$(window).load(function() {})に配置するだけdocument.readyで問題の一部が解決されることに気づきました（ページをAjaxしていない場合）。

Chromeでこれを実行できることがわかりました：

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

.srcをそれ自体に設定すると、onloadイベントがトリガーされます。