LoginSignup
1
1

More than 5 years have passed since last update.

ロールオーバーや先読みでgifアニメがおかしくなる件

Last updated at Posted at 2014-03-03

IE7以上で1回のみのgifアニメが終わっていたり、
ループのgifアニメが途中から表示されてしまうときがあります。

解決法

先読みを止める。
先読み(ロールオーバーのJSにも含まれていることがあります)によって、(ロールオーバーする前でも)画像を読み込んだ瞬間からgifアニメが動いてしまっておかしくなってしまいます。

しかしこれだとIE11が動かない・・・

ロールオーバーの画像がgifアニメ(繰り返さない)のとき、ロールオーバー2回目から最後のコマしか表示されなくなった。
JavaScriptでGIFアニメーションを繰り返し読み込むときの注意点 | iwb.jpを参考に、ロールオーバー時の画像にクエリーを付けたら動いた。

ロールオーバー時画像パス
↓
ロールオーバー時画像パス+ '?' + (new Date).getTime()

全ブラウザこれでいけるか?と思ったら、Firefoxの挙動がおかしい

[JavaScript] Memo, IE 10, IE 11を判別するnavigatorプロパティ - userAgentを使わずに « イナヅマTVログを参考に、IE11のみ分岐

ロールオーバー時画像パス+ '?' + (new Date).getTime()
↓
var is_ie11 = !!window.navigator.pointerEnabled; //IE11かどうか
if(is_ie11) { //IE11のみ
    ロールオーバー時画像パス+ '?' + (new Date).getTime()
} else { //それ以外
    ロールオーバー時画像パス
}
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1