ちょっと前にページのローディングアニメにgifアニメを使う機会がありまして、その際にちょっと引っかかった部分なのでブログにメモしておこうと思います。
Gifアニメとブラウザのキャッシュ
Gifアニメはコマ数までブラウザにキャッシュされるらしいのです。
なので、JSで途中で消して、また表示するという挙動をそのままやると、消したタイミングのコマがキャッシュされて次に表示する時にはそのコマから再生されます。
このキャッシュは別にJSでのページ遷移なしの切り替えだけの話ではありません。
普通にimgタグで記述しているだけのGifアニメでも、loop再生の設定をしていないと二回目以降は最後のコマで止まってしまったままになるという現象になるようです。
人情としては、リロードされたら最初のコマに戻ってほしいところですよねー。
解決方法は、読み込みパスに引数として毎回違う値を入れる
解決策は簡単で、「毎回新しい画像ですよ」と認識させるために読み込みパスを変えてやれば良いです。
例えば、日時情報なんかが良いでしょう。同じ時間は二度と訪れません。
Javascript(jQuery)では具体的には下記のような感じです。
$('#button').on('click', function(event) {
$('#gif').html('<img src="animation.gif?'+(new Date).getTime()+'">');
});
上記はクリックした際にGifアニメを読み込む記述ですが、これをページ読み込み時に変えてやったり用途に応じて変更すればGifアニメのキャッシュ対策は問題ないかと思います。PHPなんかでも同じやり方でキャッシュを防げますねー。
