大家好，我现在在做一个单页Web应用，需要实现点击按钮重启非循环播放的GIF动画的功能。

我查了不少资料，知道HTML/CSS/JS没法直接重启GIF，只能用一些变通方法，但这些方法在Firefox里都失效了，想请教下有没有可行的替代方案（我没用到jQuery）。

先说说我试过的两种方法：

方法1：临时替换图片src #

这是网上最常见的 workaround，思路是先把图片src换成静态图（或者直接清空），再切回原动图：

function restartGif() {
  const x = document.getElementById('itsPronouncedJiff');
  x.src = "./static.gif"; // 或者直接把src设为空
  setTimeout(() => {
    x.src = './animated.gif';
  }, 1);
}

结果在Firefox里完全不生效——把src切回动图后，动画直接跳到最后一帧，根本不会从头播放。

方法2：删除原元素后插入克隆节点 #

后来我又试了删除原img元素，再插入它的克隆节点，想着这样相当于重新加载图片：

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

结果还是一样，Firefox里还是直接停在最后一帧，完全不从头播。

有没有大佬遇到过同样的问题？求一个能在Firefox里生效的解决方案，万分感谢！