Question

有一个代码在单击时在表格单元格中显示一个小的gif动画。动画是unlooped。它只是一个动画复选标记。

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？timestamp = 1508487387065 与 ok.gif？timestamp = 1508487401817 的文件相同，因此不会使用它的缓存并重新加载图像，为您提供所需的效果。

多次加载unlooped gif-animation

1 个答案: