使用JS在GIF中添加时间戳以防止缓存

Question

你好，我正在使用 Revolution Slider (示例在这里) 并且其中包含一个 GIF。我有四个幻灯片，它们都使用相同的图像源作为 GIF。

问题是它只在第一张幻灯片上加载 GIF，然后从第二张幻灯片开始，它就不再动画了 - 我认为这是由于缓存原因。我想尝试在图片链接中添加时间戳或随机查询字符串的在线解决方案，如此 <img src="image.gif?01234">

但由于它是从幻灯片中加载的，我所能做的就是为每个幻灯片分配一个 ID 或类，然后使用 JS 添加时间戳。而我并不熟悉 JS。有人能帮忙吗？

- Suika

---

你能提供你正在使用的插件链接吗？很难猜到 RevSlider 如何加载幻灯片。 - Raunak Kathuria

你不需要使用带时间戳的版本重置src，这会导致浏览器重新向服务器请求文件。通常，只需设置 img.src = img.src; 即可重新启动非循环gif。另外，你可以尝试修改你的gif使其循环播放 :-) - Kaiido

@RaunakKathuria 对不起，请查看我的编辑。@Kaiido 您建议我如何设置 img.src = img.src？我对js的了解非常少。顺便说一下，gif确实循环播放，但只播放一次。当它再次显示在其他滑块上时，只会出现第一帧，但每次重新加载页面时都会动画化。 - Suika

Answer 1

你可以使用 JavaScript 修改源代码，例如你所描述的有 ID 或类的情况下。 HTML

<img src="../abc.gif" alt="dummy title" id="img1" />

Javascript

function editSrc() {
  // get current src of image
  var img1 = document.getElementById('img1');
  var prevSrc = img1.src;
  alert(prevSrc);
  // get current date
  var dt = new Date();
  // modify img with current timestamp
  img1.src = prevSrc + "?" + dt.getTime();
  alert(img1.src);
}

如果您希望持续更新，最好使用：

// split src based on `?` and then take the src before `?`
img1.src = prevSrc.split('?')[0] + "?" + dt.getTime();

替代而非

img1.src = prevSrc + "?" + dt.getTime();

Demo

- Raunak Kathuria