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);

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

如何进行一次＆＃34;循环＃34;每页刷新/加载动画GIF背景播放？

2 个答案: