如何在每个页面 refresh/load 上制作 "loop once" 动画 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

我不确定这是否会为您提供您正在寻找的确切结果，但您可以使用 JavaScript 设置一个间隔运行 s every (however长你的 .gif 自然运行s)。所以，如果你的 .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);

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

Answer 2

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

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

如何在每个页面 refresh/load 上制作 "loop once" 动画 GIF 背景播放？

How can I make a "loop once" animated GIF background play on every page refresh/load?

html

javascript

css

jquery

page-refresh