求助：非循环动画GIF在Firefox中无法通过常规方法重启的解决方案

我刚好遇到过类似的Firefox GIF播放问题，之前换src、克隆元素的方案失效，核心原因是Firefox会缓存GIF的播放状态——哪怕你重新赋值原URL或克隆节点，它依然会复用之前的播放进度，直接跳到最后一帧。下面给你两个经过验证的兼容方案，都不需要jQuery：

方案一：利用Blob和Object URL（推荐，无额外请求） #

这个方法会从浏览器缓存中读取原始GIF，生成一个全新的Blob URL，让Firefox认为是新资源，从而从头播放动画，还不会额外请求服务器：

function restartGif() {
  const img = document.getElementById('itsPronouncedJiff');
  // 去掉可能存在的旧查询参数，保留原始URL
  const originalSrc = img.src.split('?')[0];

  fetch(originalSrc)
    .then(response => response.blob())
    .then(blob => {
      // 创建新的Object URL赋值给图片
      img.src = URL.createObjectURL(blob);
      // 图片加载完成后释放Object URL，避免内存泄漏
      img.onload = () => {
        URL.revokeObjectURL(img.src);
      };
    })
    .catch(error => console.error('重启GIF失败:', error));
}

原理说明 #

• fetch会先从浏览器缓存中获取GIF的二进制数据（如果已经缓存过），不会发起新的网络请求
• URL.createObjectURL(blob)生成的临时URL是唯一的，Firefox会把它当作全新资源，从头播放动画
• 最后通过URL.revokeObjectURL释放资源，避免长期占用内存

方案二：添加随机查询参数（简单直观） #

如果觉得Blob方法有点复杂，可以给GIF的URL添加一个随机查询参数（比如时间戳），让浏览器误以为是新资源，强制重新加载：

function restartGif() {
  const img = document.getElementById('itsPronouncedJiff');
  const originalSrc = img.src.split('?')[0];
  // 拼接时间戳作为查询参数，确保每次URL都不同
  img.src = `${originalSrc}?t=${Date.now()}`;
}

注意事项 #

• 这个方法可能会触发新的网络请求（如果服务器缓存策略不允许带查询参数的资源复用缓存）
• 适合GIF文件体积较小，或者对请求量不敏感的场景

为什么之前的方案失效？ #

Firefox对GIF的缓存逻辑比较特殊：它不仅缓存GIF的二进制数据，还会缓存播放进度状态。所以哪怕你把src改回原URL，或者克隆元素，它都会直接从缓存的进度继续播放，而非从头开始。上面的两种方案都是通过“欺骗”浏览器加载“新资源”的方式，绕过了这个状态缓存。

内容的提问来源于stack exchange，提问作者Haley Halcyon