web-dev-qa-db-ja.com

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

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

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

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

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

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

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

また、この post で答えを使用することもできます。これは、単一の動的に生成されたイメージに適応しました。

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

Fiddle

133
Fabrício Matté

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

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

  2. 次のように、画像srcに一意の接尾辞を追加して、ブラウザにダウンロードを強制します。

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

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

10
haynar

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

コードサンプル：

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

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

2
user9319

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

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

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

0
Noah Ellman