やっぱりIE9でもキャッシュ有効時のimg要素はonloadを無視する件
Author: 秋葉秀樹 | Comments(0) | Trackback(0)
今さら書くことでもないのですが、IE6〜8に引き続き、IE9でも同じような仕様なので、自分用にメモ。
JavaScriptで画像（<img>）の読み込みの完了を待ってから処理を実行する時に、キャッシュ対策としてよくやってる
var img = $(this); // <img>を指すimg.src = 画像のパス + "?" + new Date().getTime();img.onload = function () { //読み込み完了後の処理
でもでも、、今回はちょっと違うケースで、
もう既にHTMLに書かれている以下のようなimg要素のロード完了を待つ場合、src属性の値はもう決まっているから、キャッシュ対策っていうものでもないのです。
<img src="image01.jpg" alt>
IE9の場合では、もう既に画像がキャッシュによって読み込みが完了している場合、
onloadイベントハンドラを実行しないでスルーしちゃうので、読み込み後の処理が全くされない状態でした。
ただしこれはIEだけの問題で他のブラウザは素直に処理してくれるので、
ブラウザ判定をして、「IEで見てる、なおかつ、画像の幅が0ではない」事を条件として、ロード完了後の処理を行う、
さもなくば、他のブラウザと同様の処理としてonloadを使って、読み込み完了を待つ、という処理で対応してみる。
//jQuery使用ですvar img = $(this); // <img>を指すvar ua = $.browser;if(ua.msie && img.width() !=0) { imageLoaded();}else{ img.load(imageLoaded);} function imageLoaded (){ //読み込み完了後の処理
画像が読み込まれないと、後で処理などをするときに困るので、
画像読み込みとIE9仕様の対策はこれから要るのかな？と。