取消 GIF 同步

Question

我不知道如何去同步这两个GIF图像。

我在以下浏览器中测试了它们：Opera 和 Edge。

当我启动第一个 GIF（左侧）时，我希望第二个 GIF 能够独立开始其动画。然而，它们并没有像预期那样去同步。

第二个动画从其动画的中间开始，恰好与第一个动画的同一时刻开始。

• #gif2

  怎么可能不启动它自己的gif动画？
• 他们都使用来自同一个“流”的相同 gif？

function show1() {
  let gif1Element = document.getElementById("gif1")
  setTimeout(
    () => {
      gif1Element.style.backgroundImage = 'url("https://i.imgur.com/pgFWygm.gif")'
    }, 0
  )
}
show1()

function show2() {
  let gif2Element = document.getElementById("gif2")
  setTimeout(
    () => {
      gif2Element.style.backgroundImage = 'url("https://i.imgur.com/pgFWygm.gif")'
    }, 400
  )
}
show2()

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

#gif2 {
  left: 110px;
}

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

• 我尝试使用

  <img>

  标签，但结果完全相同。
• 我听说我需要重置元素的来源。

但我认为不应该是这样的：

function restartGif(img) {
  let src = img.src;
  img.src = '';
  img.src = src;
}

我只想补充一点，我为我的英语道歉。我还在学习中

Answer 1

（对于那些不看评论部分的人）只需在 gif 中添加

?ExplosionNo=1

和

?ExplosionNo=2

，如下所示：

function show1() {
  let gif1Element = document.getElementById("gif1")
  setTimeout(
    () => {
      gif1Element.style.backgroundImage = 'url("https://i.imgur.com/pgFWygm.gif?ExplosionNo=1")'
    }, 0
  )
}
show1()

function show2() {
  let gif2Element = document.getElementById("gif2")
  setTimeout(
    () => {
      gif2Element.style.backgroundImage = 'url("https://i.imgur.com/pgFWygm.gif?ExplosionNo=2")'
    }, 400
  )
}
show2()

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

#gif2 {
  left: 110px;
}

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