如何在每个页面刷新/加载时创建“循环一次”动画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背景播放？

回答

相关问题