GIFアニメーションがリロードの際に動かない問題と解決方法

WebサイトでGIFアニメーションを使っているとうまく動かないといったことはないだろうか。おそらくそれはループしない一回だけのGIFアニメーションを使う時。

ループしない一回だけのGIFアニメは一度アクセスしてからリロードしてもアニメーションが動きません。
ループ再生されるGIFアニメは動くのに。

原因は観覧しているWebブラウザにキャッシュされるからである。

最初にアクセスしたときのGIFアニメーションが終了するとその時点でキャッシュされ、次回も同じものを表示するため一度動いたアニメーションは終了しているわけです。（ループ再生されるGIFアニメーションはまた最初に戻って動くので問題ない）

解決方法としては、違う画像と認識させればよいのだ。
そうすることでリロードしたりページを移動して戻ってきても、違う画像となるのでキャッシュは関係なくちゃんとアニメーションしてくれるわけです。

それをjQueryでやっちゃいます。

やることは、画像の末尾に「?」を付けてパラメータを渡すこと。

渡すものは、

そうだねぇ〜

確実に変化する時間かな。
さらにミリ秒単位なら確実にパラメータの値が変わるので確実。

 
こんな感じです。

 HTML

<div>
    <img id="animation" src="images/animation.gif" alt="Sample gif">
</div>

jQuery

$(document).ready( function(){
  
    let timestamp = new Date().getTime();
    $('#animation').attr('src', 'images/animation.gif' + '?' + timestamp);
  
});

まずは変数timestampにDateオブジェクトのgetTimeメソッドを使って1970年1月1日0時0分0秒(UTC)を起点とした現在までの経過ミリ秒を取得してくる。それをattrメソッドで画像の末尾に「?」と「timestamp」をくっつけて書き換えてあげる。
こうすることで「animation.gif?1475734615757」みたいに画像の末尾に時間のミリ秒の数値が付き、リロードするたびに数値が変わるので違う画像と認識される。

うぅ〜〜〜ん、Great!

おまけ

ここでおまけのコード。

ループしない単発のGIFアニメーションを一定の間隔で発動させたいって時に。

ちょっと画像はJavaScriptで吐き出してみましょうか。
 
HTML

<div id="box"></div>

jQuery

$(document).ready( function(){
  
    let now = new Date().getTime();
    $('#box').append('<img id="animation" src="images/animation.gif'+'?'+''+now+'" alt="">');
  
    setInterval(function(){
        let timestamp = new Date().getTime();
        $('#animation').attr('src', 'images/animation.gif' + '?' + timestamp);
    }, 8000);
  
});

appendメソッドで変数nowで取得してきた現在の経過ミリ秒付きのimg要素を#boxのdivの中に出力。
setIntervalで8秒間隔でtimestamp付きの画像に書き換える。

うぅ〜〜〜ん、シンプル！

このように同じ画像でも、画像に対してミリ秒の時間を加えてあげて違うGIFアニメーションの画像として読み込ませることで、最初からアニメーションしてくれます。

これでGIFアニメーションのキャッシュ問題は解決かな。