1. ホーム
  2. jquery

[解決済み】画像読み込み時のjQueryコールバック(画像がキャッシュされている場合でも可)

2022-03-30 15:48:42

質問

したいのですが。

$("img").bind('load', function() {
  // do stuff
});

しかし、キャッシュから画像を読み込むとloadイベントが発生しない。 jQueryのドキュメント 提案する プラグイン を使用すると、これを修正することができますが 動作しない

解決方法は?

もし src がすでに設定されている場合、イベントハンドラをバインドする前に、キャッシュされたケースでイベントが発火しています。この問題を解決するには、次のような方法でイベントをチェックし、トリガーするループを作成します。 .complete のようなものです。

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

からの変更に注意してください。 .bind() から .one() イベントハンドラが2回実行されないようにするためです。