JavaScriptでGIFアニメーションを繰り返し読み込むときの注意点

count3

読み込んだGIFアニメーションをキャッシュすることによる問題点

画像ファイルというのは特に何もしなければ画像は読み込み後にブラウザにキャッシュされ次回同じものを表示するときはキャッシュが表示される。

サーバー側の負担を減らし、ユーザー側の表示速度を上げるための仕組みだがGIFアニメーションの場合、ブラウザを更新せずにJavaScriptで再度読み込むとアニメーションが終了した状態で読み込んでしまうため都合が悪いことがある。

例えば下記のコードのようにボタンをクリックしてGIFアニメーションを読み込む場合、1回目は最初から再生されるが2回目は再生終了後（あるいは再生途中）の画像が表示されてしまう。

$("#s1").click(function(){
  $("#r1").append('<img src="count3.gif">');
});

そのためGIFアニメーションを毎回呼び出した時に最初から再生するにはクエリーを付けてキャッシュを使用せずに毎回読み込む必要がある。

$("#s2").click(function(){
  $("#r2").append('<img src="count3.gif?' + (new Date).getTime() + '">');
});