如何在每个页面刷新/加载时进行“循环一次”动画GIF背景播放？

Question

我有一个动画GIF文件作为我的div的背景图像，它从Photoshop保存到循环只有一次。 所以它播放的唯一时间是在页面的原始负载上。

有没有什么方法可以基本上删除背景图像并在页面刷新时再次添加它？ 几乎让DOM认为它是一个新的图像，从而再次循环它？

这是div：

<div id="name-logo"></div>

和css：

  position: relative;
  width: 403px;
  height: 93px;
  margin: 50px auto 100px;
  background-image: url(my.gif);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

谢谢

Answer 1

实现它的一种方法是通过版本控制。 这将使dom相信它每一个都是新的形象。

document.getElementById('name-logo').style.backgroundImage = "url('my.gif?v=" + new Date().valueOf() + "')"

Answer 2

我不确定这是否会为您提供您正在寻找的确切结果，但您可以使用JavaScript来设置每个运行的间隔（无论您的.gif自然运行多长时间）。 所以，如果你的.gif运行需要一秒钟，你可能会这样做：

setInterval(function() {
     // clear out the current background image as it is
     document.getElementById('name-logo').style.backgroundImage = "url('')";
     // reset the background image
     document.getElementById('name-logo').style.backgroundImage = "url('my.gif')";
}, 1000);

同样，我没有亲自测试过这个，但它可能会引导你朝着一个好方向前进。