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

Question

你好，我使用的是Revolution Slider（这里的示例），里面有GIF。我有四张幻灯片，它们都使用相同的GIF图像源。

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

但由于它是从滑块加载的，所以我所能做的就是为每个滑块分配一个ID或类，然后使用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();

演示