IEとFirefoxでgifアニメの挙動が違う件。他のブラウザは調べてもいない。

備忘録

こんな感じのテーブルなりcssで整えられたリストがあったとする。

┌─┐┌─┐┌─┐┌─┐
│０││１││２││３│
└─┘└─┘└─┘└─┘
┌─┐┌─┐┌─┐┌─┐
│４││５││６││７│
└─┘└─┘└─┘└─┘
┌─┐┌─┐┌─┐┌─┐
│８││９││10││11│
└─┘└─┘└─┘└─┘
┌─┐┌─┐┌─┐┌─┐
│12││13││14││15│
└─┘└─┘└─┘└─┘

繰り返しのない5秒間の同じアニメーションgifを、5秒間隔で、いずれかの場所にぶち込む。
再生もぶち込む間隔も共に5秒なので、

  1. どれかにアニメーションgifがぶち込まれてアニメーション開始
  2. 5秒後、アニメーション終了と同時に、別の場所に同じアニメーションgifがぶち込まれ、アニメーション開始
  3. 以下無限ループ

この場合のIEとFirefoxの挙動の違い

  • IE
    • 二つ目以降がアニメーションしない
  • Firefox
    • 二つ目以降、直前までのアニメーションgifがストップせずに延々アニメーションする

恐らく同じ画象をぶち込んでいることが原因で、それぞれキャッシュが効いてしまっていると予想。
IEは最初にぶち込んだアニメーションgifが既に一周してしまっているので、それ以降同じアニメーションgifをぶち込んでも終了していると認識されてしまう。
片やFirefoxは二つ目以降のアニメーションgifが再生されるので、直前までの再生終了がなかったことになっているのではないかと。
まぁ確認してないから予想ですが（＾ｑ＾）

じゃあどうやって解決するのっと

「hoge.gif」じゃなくて「hoge.gif?********」みたくケツに乱数つければおｋ。
但し全て別の画象と見なされキャッシュが効かないので、毎回新しく画象取得の為の通信が走る諸刃の剣。