使用js在gifs中附加时间戳以防止缓存

Question

您好，我正在使用带有 GIF 的 Revolution Slider (sample here)。我有四张幻灯片，它们都使用相同的 GIF 图片源。

问题是它只在第一张幻灯片上加载 GIF 一次，然后从第二张幻灯片开始，它不再是动画 - 我认为这是因为缓存。我想尝试我在网上找到的关于附加时间戳或随机查询的解决方案 <img src="image.gif?01234">

但由于它是从滑块加载的，我所能做的就是为每个滑块分配一个 ID 或 class，然后使用 JS 附加时间戳。而且我对 JS 不是很熟悉。有人帮忙吗？

Answer 1

如您所述，如果您有 id 或 class，您可以像这样使用 javascript 修改源代码

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

使用js在gifs中附加时间戳以防止缓存

Append timestamp in gifs using js to prevent caching

javascript

jquery

gif