135

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

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

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

5 に答える 5

185

画像を動的に生成しているので、の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";

フィドル

于 2012-09-10T15:41:59.900 に答える
12

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

コードサンプル：

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});
于 2015-07-24T19:52:26.923 に答える
5

このような状況では、次の2つの解決策が考えられます。

  1. この投稿で提案された解決策を使用してください

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

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

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

于 2012-09-10T15:36:59.390 に答える
3

私は今日同じ問題に遭遇しました。$(window).load(function() {})さまざまな方法を試した結果、問題の一部を解決するのではなく、サイズ設定のコードを内部に配置するだけでdocument.ready解決できることに気付きました（ページを隣接させていない場合）。

于 2013-01-03T06:05:04.773 に答える
-1

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

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

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

于 2017-02-01T08:15:31.407 に答える