[Javascript] IE8で、キャッシュから画像を読み込んだ時にimgタグのonloadイベントが動作しない場合の回避策

Javascriptをコーディングしていて、IEだけ意図した動作を示さないということはあまりに数多く遭遇するトラブルの一つである。

特にIE9以前のバージョンではそれが顕著であり、そのことに頭を悩ませるのにはもはや慣れたという人も多くいる筈である。この投稿では、IE8で遭遇した不思議な現象についてである。

img要素にonloadイベントをくっつけると画像のロード完了時に関数を実行する事ができるのだが、IE8ではimg要素の画像がキャッシュからロードされるとき、onloadイベントが実行されない。

1. キャッシュから読み込んだ時にonloadイベントが動作しないコード

var img = document.createElement("img");
img.src = "画像のパス";
img.onload = function(){alert("読み込んだよ!")};
parentElement.appendChild(img);

このようにHTMLに動的に画像を埋め込む際、IE8においては初めてのロード時には「読み込んだよ!」とアラートが表示されるが、二度目以降に画像がキャッシュされた状態ではアラートが表示されない。

いろいろ調べたり試したりするうち、回避策が2つあることがわかった。

1つ目はキャッシュのロード自体を防ぐ方法。

2つ目はimgのsrcを指定するタイミングをいじる方法である。

 

 

1. キャッシュのロード自体を防ぐ方法

この方法は以下のように行う。

2. キャッシュのロード自体を防ぐ方法

var img = document.createElement("img");
img.src = "画像のパス" + "?" + new Date().getTime();
img.onload = function(){alert("読み込んだよ!")};
parentElement.appendChild(img);

変更点は赤字の部分。

画像のパスの末尾に、「?」と文字列を加える。

ブラウザは画像のsrcが「?」以下の文字列まで一致していないと同じ画像と判断せず、キャッシュを読み込もうとしない。

現在時刻を「?」以下の文字列とすることで、ブラウザが別の画像として読み込んでくれるから毎回onloadイベントが作動するという仕掛けである。

しかし、毎回読み込み直すには大きすぎる画像である場合やサーバーの負担を考えるとスマートなやり方とは考えづらい。

ではもうひとつの方法ではどうだろう。

 

 

2. imgのsrcを指定するタイミングをいじる方法

この方法はimgオブジェクトのsrcを指定するタイミングを、HTMLにimgタグを生成するより後にするという簡単な工夫である。

2. imgのsrcを指定するタイミングをいじる方法

var img = document.createElement("img");
img.onload = function(){alert("読み込んだよ!")};
parentElement.appendChild(img);
img.src = "画像のパス";

変更点は赤字の部分。

こうすることでブラウザがキャッシュを読み込むにもかかわらず、onloadイベントも発動するようになる。

このほうが、キャッシュの恩恵を受けつつ目的の動作を実行できるのでいい方法なのではないだろうか。

広告

t87r について

趣味:トランペット・釣り・コーディング JavascriptとGAE/Pythonを勉強中。
カテゴリー: Web Design タグ: , パーマリンク

[Javascript] IE8で、キャッシュから画像を読み込んだ時にimgタグのonloadイベントが動作しない場合の回避策 への1件のフィードバック

  1. ピンバック: IE8でキャッシュ画像のonloadイベントが動作しない件の対処法 | Foreignkey, Inc.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中