Desynchronizing GIFs

Question

I don't know how to desynchronize these two GIF images.

I tested them in the following browsers: Opera and Edge.

When I start the first GIF (on the left), I expect the second one to begin its animation independently. However, they are not desynchronizing as expected.

The second one starts in the middle of its animation, precisely at the same moment the first one is at.

• How it is possible that #gif2 doesn't start it's own gif-animation?
• They are both using the same gif, from the same "stream"?

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>

• I was trying to use <img> tag, but result was exactly the same.
• I heard that I need to reset source of an element.

But I think that shouldn't be looking like this:

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

I just want to add that I apologize for my English. I'm still learning

Answer 1

(For those, who don't read the comment section) just add a ?ExplosionNo=1 and a ?ExplosionNo=2 to the gifs, like so:

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>