Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【jQuery】画像のloadイベントがIE8で動作しない時の解決法

      2016/02/17

よく画像を読み込む時にローディングの時にプログレスバーを設置する事もあると思います。
画像を読み込むイベントはloadイベントがありますが、なぜかIE8とIE9でloadイベントが動作しないで途中で止まる自体に陥りました。

いろいろ調べてみるとIE8とIE9ではやはり問題があるらしく画像読み込む時にloadイベントが動かない事があるようなので、今回はその解決した方法をメモしていくことにします。
また参考コードは画像が複数枚読み込まれる事を想定したコードの記述になります。

IEで画像を読み込む時のloadイベントのデモ

まずは、IEで画像を読み込む時のloadイベントがどういった挙動が起きるのかデモを作成しました。IE8かIE9で見ていただくとよいと思います。
確認方法はIE11であればツール→F12開発者ツールからIE8やIE9での表示方法が確認できます。またデモに関しては

  • IEでloadイベントが動作せず画像が読み込まれない例
  • src属性をloadイベント後に設定する
  • 画像のキャッシュ自体をロードさせない方法

の3パターンを用意していて「src属性をloadイベント後に設定する」「画像のキャッシュ自体をロードさせない方法」は解決パターンになります。

IEでloadイベントが動作せず画像が読み込まれない例

上記のサンプルをIE8で見ていただくと、プログレスバーが途中で止まってloadイベントが動作しなくなるはずです。
IE9に関してはリロードするとloadイベントが動作してプログレスバーが100%までちゃんとアニメーションしたり、1枚だけ読み込んでそれ以上は止まってしまったりムラがあるように感じました。

ソースコードを見ていただくと分かるのですが、単純に画像オブジェクトを取得してロードイベントを設定しているだけです。

htmlのソースコード

ローディング時のプログレスバーのdivと画像を並べてるだけです。必要なコードだけ載せておきます。

jQueryのソースコード

loadイベントに関してはone()で処理していますが、bindで指定してもloadで直接処理しても構いません。

loadイベントが動作しない原因は?

キャッシュから画像がロードされる

このようにIE8やIE9でlaodイベントの挙動がおかしいのは、どうやらhtmlに画像を埋め込であるとsrc属性に設定してある画像が読み込まれブラウザにキャッシュされます。その為画像がブラウザにキャッシュされているとimg要素のonloadイベントが動作しないという現象が起こるようです。

loadイベントの前にsrc属性を設定する

こちらもキャッシュが原因になるのですが、img要素を作成してsrc属性を設定してloadさせる方法を取ることがあると思います。*下記参照

上記の方法のようにloadイベントを付与する前にsrcで画像パスを指定してしまうと、そちらが先に読み込まれる為loadイベントが動作しなくなってしまう。

loadイベントを動作させる為の対策

それでは、loadイベントが動作しなくなる挙動を回避する方法をいくつか載せていきます。

src属性をloadイベント後に設定する

img要素を生成してsrc属性の設定をloadイベントの後に設定してあげるとloadイベントが動作します。

下記の例はhtmlにある画像の総数分新しいimg要素を作成して、それぞれにloadイベントを設定しています。
その後にattr()で元々取得しておいた画像オブジェクトの配列(all_img)からsrcに指定してある画像URLを取得してそのまま新しいimg要素のsrc属性に指定しています。

画像のキャッシュ自体をロードさせない方法

画像のキャッシュ自体を読み込ませない方法としては、よくあるパターンですが読み込み時に画像のURLの末尾に「?」でつなげて現在時刻を加える事です。
この方法であれば読み込まれる度に画像URLの末尾に現在時刻に加わることでキャッシュに残ってる画像パスと一致しないので毎回違う画像と認識されるので、キャッシュから読み込もうとせずに毎回loadイベントが実施されます。

まとめ

このようにIE8とIE9では画像の読み込み時にloadイベントが動作しないというバグ?がありましたが、原因はブラウザのキャッシュでした。
キャッシュによりすでに画像が読み込まれてるためloadイベントが動作しないという事で、上記の方法で私自身も対処しました。

今回はイメージスライダーを作成している時に起こったバグだったのですが、こういった読み込み処理って大抵画像を複数枚読み込む時の処理が多いと思います。
画像のキャッシュを防く為に画像パスに現在時刻を付ける方法は、あまり枚数が多いと速度が遅くなった時などに時間がかかったりするのでお勧めできない方法ですね。

 - jquery ,

     

Message

  関連記事

【jQuery】mousemoveでチカチカした

jqueryでmousemoveで追従するツールチップを作成したときに、ツールチ …

jQuery 1.7の on()で要素を削除して追加後もイベントを永続的に引き継ぐ

先日、とある案件である要素にclickイベントを設定していたのですが、削除する必 …

html5の独自データ属性を設定してjQueryで取得してみる

さて、最近はhtml5もすっかり浸透してきましたがhtml5では新しく独自のデー …

【jQuery】配列から最大値を求めて、div要素の高さを揃える

よく対象のdiv要素のCSSで「padding-bottom:1000px; m …

no image
jQuery フォームで特定の条件で選択不可にする

フォームを選択不可にして入力不可にするにはどうするかをメモ。 動作確認 inpu …

no image
jQuery で時間差でアニメーション

よくFlashでTween系のアニメーションでdelay効果で時間差で表示させる …

【JavaScript】連想配列の要素をソートして並び替えてみる

久しぶりにjQueryを業務で弄っています。で、リストの一覧をアルファベット順に …

no image
jQuery フォームの操作~特定の要素の絞込み~

フォーム要素をjQueryで扱うときにフォームをデコレーションする場面も多いと思 …

iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaS …

no image
jQuery ちょっとHTML操作

今更ながら、使ったことがないので調べてみてちょっと知ったのでメモ。 wrapAl …