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

【问题标题】：How can I make a "loop once" animated GIF background play on every page refresh/load?如何在每次页面刷新/加载时播放“循环一次”动画 GIF 背景？
【发布时间】：2016-12-08 14:09:00
【问题描述】：

我有一个动画 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;

谢谢

【问题讨论】：

标签： javascript jquery html css page-refresh

【解决方案1】：

我不确定这是否会为您提供您正在寻找的确切结果，但您可能可以使用 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);

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

【讨论】：

这不是在当前页面上更改背景图像，而是在页面刷新时更改背景图像..

【解决方案2】：

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

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

【讨论】：