幾次加載unlooped gif動畫

有一個代碼在單擊時在表格單元格中顯示一個小的gif動畫。動畫是unlooped。這只是一個動畫複選標記。幾次加載unlooped 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文件？

來源

2017-10-20 Artik

不知道這是否會起作用，但是您可以嘗試通過爲圖像URL添加時間戳來消除瀏覽器緩存：'obj.innerHTML ='';' –

@Patrick Hund。但它如何幫助？例如，圖像的地址是'images/ok.gif'，而不是'images/ok.gif20171020'。 – Artik

對不起，我的錯誤，我的意思是這樣一個參數：'obj.innerHTML ='';' –

問題是，瀏覽器在加載一次後緩存圖像，並且僅當圖像新鮮時才運行動畫，而不是在瀏覽器將其從緩存中拉出時運行。

例如，您可以通過向每次引用圖像時更改的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，它不會使用它的緩存和重新加載圖像，讓您的方式期望的效果。

來源

2017-10-20 08:17:53

謝謝。現在，我很清楚。但是一段時間後會不會導致緩存空間溢出？ – Artik

我不認爲這是你必須擔心的事情。瀏覽器將正確地管理緩存，你可以確定瀏覽器開發者會想到這一點 –

幾次加載unlooped gif動畫

回答

相關問題