如何在每個頁面刷新/加載時創建「循環一次」動畫GIF背景播放？

我有一個動畫GIF文件作爲我的div的背景圖像，這是從Photoshop保存只循環一次。所以它唯一播放的時間就是頁面的原始負載。如何在每個頁面刷新/加載時創建「循環一次」動畫GIF背景播放？

是否有任何方法從本質上刪除背景圖像並將其添加到頁面刷新？幾乎讓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;

感謝

來源

2016-08-03 John Jackson

實現它的一種方法是通過版本控制。這將使dom相信它每一個新的形象。

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

來源

2016-08-03 03:25:15 z0mBi3

哇，像變魔術一樣的背景圖片！ –

我不能確定這是否會給你你正在尋找的確切結果，但你可能可以使用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);

同樣，我沒有親自測試這一點，但它可能會導致你在一個很好的方向。

來源

2016-08-03 03:05:21

它不是要改變，而當前頁面，其約當一個頁面刷新更改背景圖片... –

如何在每個頁面刷新/加載時創建「循環一次」動畫GIF背景播放？

回答

相關問題