数回ループしていないgifアニメーションをロードする

Question

クリックすると小さなセルのGIFアニメーションが表のセルに表示されます。アニメーションはアンループされています。それはちょうどアニメーションのチェックマークです。

HTML：

.... 
<script src="mega_script.js" defer></script> 
<table> 
    <tr> 
    <td onclick="f(this);"></td> 
    <td onclick="f(this);"></td> 
    <td onclick="f(this);"></td> 
    </tr> 
</table> 
.... 

mega_script.js：

function f(obj) { 
    obj.innerHTML = '<img src="images/ok.gif">'; 
} 

まず、それがロードされ、正常にアニメーション化されます。他の表のセルを次にクリックすると、既にアニメーション化されていない.gifが表示されます。どうすればこれを克服できますか？

キャッシュの場合は、どのようにして.gifファイルをクリアすることができますか？

Answer 1

問題は、ブラウザが一度読み込まれるとイメージがキャッシュされ、イメージが新鮮なときだけアニメーションが実行されるということです。ブラウザがキャッシュからイメージを取り出すときではありません。

たとえば、タイムスタンプのように、イメージが参照されるたびに変更される任意のパラメータをURLに追加することによって、ブラウザにイメージを再読み込みさせることができます。

この方法は、「キャッシュ破損」とも呼ばれます。あなたのケースでは

、あなたはGIFをリロードすると、次のようにそのアニメーションを再トリガするためにブラウザを強制することができます

function f(obj) { 
    obj.innerHTML = '<img src="images/ok.gif?timestamp=' + Date.now() + '">'; 
} 

Date.now（）は、私たちに1970年から経過したミリ秒数を与えます関数が呼び出されるたびにURLが少しずつ異なることは合理的に確信できます。

ブラウザはok.gif？タイムスタンプ= 1508487387065がok.gifと同じファイルであることを知る方法がないので？タイムスタンプ= 1508487401817、それは、そのキャッシュを使用してイメージをリロード、あなたを与えることはありません所望の効果。