如何实现两张相同GIF的动画不同步播放？

问题原因解答 #

• 为什么#gif2无法启动独立的GIF动画？
  浏览器为了优化资源加载效率，会对相同URL的资源进行缓存，其中包含GIF的动画播放状态（比如当前帧位置、播放进度定时器）。当第二个元素加载同一个URL的GIF时，会直接复用已缓存的动画上下文，因此它不会从头开始播放，而是和第一个元素保持完全一致的进度。

• 二者是否使用了同一GIF的同一条“流”？
  是的。浏览器对相同URL的GIF资源只会创建一个动画播放实例，所有引用该URL的元素都会共享这个实例的播放状态，相当于共用同一条动画流。

可行解决方案 #

要让两个GIF独立播放，核心是让浏览器将它们识别为不同的资源，最简便的方法是在GIF URL后添加不同的查询参数（比如?v=1、?v=2或随机数），这样浏览器会分别缓存并创建独立的动画实例。

修改后的代码示例 #

JavaScript

function show1() {
  let gif1Element = document.getElementById("gif1")
  setTimeout(() => {
    // 添加唯一查询参数?v=1
    gif1Element.style.backgroundImage = 'url("https://i.imgur.com/pgFWygm.gif?v=1")'
  }, 0)
}
show1()

function show2() {
  let gif2Element = document.getElementById("gif2")
  setTimeout(() => {
    // 添加不同的查询参数?v=2
    gif2Element.style.backgroundImage = 'url("https://i.imgur.com/pgFWygm.gif?v=2")'
  }, 400)
}
show2()

如果需要动态生成多个独立GIF实例，可用时间戳作为随机参数：

function showGif(elementId, delay) {
  let element = document.getElementById(elementId)
  setTimeout(() => {
    const uniqueParam = `?t=${Date.now()}`
    element.style.backgroundImage = `url("https://i.imgur.com/pgFWygm.gif${uniqueParam}")`
  }, delay)
}
showGif("gif1", 0)
showGif("gif2", 400)

CSS（保持不变）

#gif1,
#gif2 {
  position: fixed;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  background-color: red;
  background-size: 100% 100%;
}

#gif2 {
  left: 110px;
}

HTML（保持不变）

<div id="gif1"></div>
<div id="gif2"></div>

关于你提到的重置src方法的问题 #

你尝试的重置src方法并非最优解，原因有两点：

1. 若使用同一URL，浏览器仍会复用缓存的动画状态，重置后可能还是同步播放；
2. 频繁重置src会触发资源重新加载，可能导致元素闪烁，还会增加不必要的网络请求（若缓存失效）。

内容的提问来源于stack exchange，提问作者Dominik Szkotland