如何在每個頁面刷新/加載時進行“循環一次”動畫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);

同樣，我沒有親自測試過這個，但它可能會引導你朝着一個好方向前進。