我怎样才能制作一个“;循环一次”;在每次刷新/加载页面时播放GIF动画背景

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

本文关键字：动画 刷新 背景 加载 GIF 播放 循环 一次 一个      更新时间：2023-09-26

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

感谢

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

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

我不确定这是否会给你想要的确切结果，但你可以使用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);

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

相关文章：