我正在尝试在我的单页应用（SPA）中实现一个交互式按钮，当用户进行交互——具体来说，是点击——时，可以重新启动一个不会循环播放的动画GIF。

我浏览了网页，发现你不能仅用HTML、CSS或 JS来重新启动一个动画GIF，但可以通过临时将源URL换成其他东西来实现，这会带来短暂的空白或占位图片的闪烁，如下所示。

function restartGif() {
  const x = document.getElementById('itsPronouncedJiff');
  x.src = "./static.gif"; // or remove the source parameter outright
  setTimeout(() => {
    x.src = './animated.gif';
  }, 1);
}

然而，在Firefox上使用这个方法并不可行。把源重新设回为动画GIF时，它会立即跳到最后一帧，而不是从头播放GIF。

甚至连删除原始元素并附加克隆版本的方案都行不通：

function restartGif{
  const x = document.getElementById('itsPronouncedJiff');
  const btn = x.parentElement;
  const y = x.cloneNode(true);
  btn.removeChild(x);
  setTimeout(() => {
    btn.appendChild(y);
  }, 10);
}

有人有可行的变通方法吗？（我不使用jQuery。）

解决方案

问题在于浏览器会缓存图像及其动画状态，并为该图像维护一个单一的位图。
这使得同一个GIF能在文档的多个位置同时运行，而一次只解码一个位图。
这也意味着页面中所有不同的 <img> 元素将显示同一帧GIF动画，且再次把 src 指向一个之前已经结束的、不再重复播放的GIF时，是不会重新启动它。

为了解决这个问题，你需要阻止浏览器使用缓存的图像。你可以通过使用缓存破坏（cache-busting）来实现——在你设置为 src 的URL上附加一个随机查询参数，例如

img.src = `path/to/file.gif?r=${Math.random()}`;

你也可以尝试手动解码GIF的帧。一些现成的库可以做到这一点，或者你可以使用浏览器内的 ImageDecoder API，但它在Safari仍不被支持。无论哪种方式，可能也不会比让浏览器自行处理要好多少。

目前有关于为 <img> 添加控件的积极讨论，但仍处于非常早期阶段，我也不确定何时会成为现实。

所以也许你可以考虑使用实际的视频格式来替代GIF图像，这样你就能控制播放，并且可能获得更好的压缩和画质。