WebページでGIFをアニメーション化する - それらを再起動する方法はありますか？

Question

私は次のようなシナリオを持っています：
私のウェブサイトの特定のセクションには、背景画像と複数の他の画像が上に重なった位置（絶対位置を使用）の800x600セクションがあります。これらの画像の1つがクリックされると、画像はアニメーションGIFとスワップされ、何かが起こったかのように表示されます。これらのアニメーションは通常1回実行されます（ループされません）。
事前定義された「アニメーションの時間」の後、アニメーションGIFは元の静止画像に戻されます。

アニメーションGIFをダウンロードする時間を知る方法がないことを除いて、すべてうまくいきます。アイテムをクリックする可能性があり、完全なアニメーションの期間中は何も起こらないようです。
この問題を解決するには、十分に簡単です。イメージをあらかじめ読み込みます。そして、実際には、私はPxLoaderを使用して、必要なすべての画像をあらかじめロードしています。

しかし、これによって一部のブラウザで新しい問題が発生します。アニメーションは1回再生され、再び再生されません。 Firefoxでは正常に動作しているようです（クリックすると、アニメーションが再生されます。もう一度クリックするとアニメーションが再び再生されます）。しかし、IEでは、動作していないようです（クリックすると、アニメーションの最後のフレームが表示されます）。私は私の問題を示すためにjsFiddleを設定した

：jsfiddle.net/xJveS/4/

私のオプションは何ですか？次回にGIFを表示するときに、GIFを再設定するにはどうすればいいですか？

更新

私は、アニメーションGIFのためPxLoaderを置き換えるために私自身の（非常に基本的な）前ローダークラスを構築することになった、それは問題は生じません。 GIFは、それらをクリックすると正常に再生されます。つまり、私の全面的な問題はPxLoader特有のものです。今のところ私の問題は自分自身のローダーを使って "解決"されていますが、解決が必要なPxLoaderにはまだ問題があります。

Answer 1

GIFを非表示のdivにロードして、必要なときに目的の場所にそのタグを追加してみましょう。ブラウザは最初の要求からキャッシュしてすぐに表示されるはずです。

Answer 2

AFAIK、JavaScriptから.gifを再起動する方法はありません。

最後にクエリ文字列を使用してsrcを同じものに設定することで、読み込みを再開できるはずです。 （申し訳ありませんが、私は笑、私の時間と効率的であるとのjQueryを使用しています）

$('#myImg').attr('src', $('#myImg').attr('src') + '?' + (new Date()).valueOf()); 

欠点は、それが再起動する前に再度ダウンロードするには、GIFを強制されますです。したがって、次に行うべきことは、新しいsrcから置換gifをプリロードするプリローダを実装することです。

var rplImg; 
function preloadReplacement() { 
rplImg = new Image(); 
var d = new Date(); 
rplImg.src = "some.gif?" + d.valueOf(); 
} 
$(function() { 
    preloadReplacement(); 
    $('#myImg').click(function(){ 
     $(this).attr('src', rplImg.src); 
     preloadReplacement(); 
    }); 
}); 

これはテストされていないですが、それは基本的な考え方です。