Downloading multiple gifs multiple times

Question

There is code that displays a small gif animation in a table cell when clicked. The animation is unleashed. This is just an animated checkmark.

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">';
}

At the first click, it loads and animates normally. The following clicks on other cells in the table show the no longer animated .gif. How can I overcome this?

If this is due to the cache, then how can I remove the .gif file from it?

Answer 1

The problem is that the browser caches the image after it is downloaded once, and the animation only starts when the image is fresh, and not when the browser extracts it from its cache.

, URL-, , , , .

" ".

gif :

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

Date.now() , 1970 , , URL .

, ok.gif? timestamp = 1508487387065 - , ok.gif? timestamp = 1508487401817, , .