GIFアニメーションを任意のタイミングで動かす

GIFアニメーションを任意のタイミングで最初から再生する方法を調べてみました。

うまくいかなかった方法

最初に試してみてうまくいかなかった方法です。

HTML

<div id="wrapper"></div>
<button id="btn">GIFアニメーション読み込み</button>

ボタンクリック時に、#wrapperの中にimgを追加します。

JavaScript

var btn = document.getElementById('btn');
var wrapper = document.getElementById('wrapper');

btn.addEventListener('click', function() {
	// 追加するimgを生成
	var img = document.createElement('img');
	img.src = 'anime.gif';

	// 追加エリアの中身を空にしてimgを追加
	wrapper.textContent = null;
	wrapper.appendChild(img);
}, false);

初回アクセス時の1回目は普通に表示されますが、2回目以降やリロードした時にはキャッシュが残っていて最初から表示されませんでした。
うまくいかなかった場合のデモページ
　

うまくいった方法

srcにタイムスタンプでパラメータを付けて、キャッシュを残さないようにすることで最初から再生できました。

var btn = document.getElementById('btn');
var wrapper = document.getElementById('wrapper');

btn.addEventListener('click', function() {
	// タイムスタンプを取得
	var date = new Date();
	var timestamp = date.getTime();

	// 追加するimgを生成
	var img = document.createElement('img');
	img.src = 'anime.gif?' + timestamp;

	// 追加エリアの中身を空にしてimgを追加
	wrapper.textContent = null;
	wrapper.appendChild(img);
}, false);

うまくいった場合のデモページ

ただし、ブラウザによって再生開始までにかかる時間が少し異なるようでした。
chromeだとスムーズに再生できましたが、IEだと読み込みが完了するまで最初の画像のまま停止しているので、GIFアニメーションの内容や再生の仕様によっては違和感が出るかもしれません。
(今回のスクリプトの原因というより、各ブラウザでのGIFアニメーション読み込みの挙動の差のようですが。)