如何使用JS触发GIF动画？答案

【问题标题】：How to use JS to trigger a GIF animation?如何使用JS触发GIF动画？
【发布时间】：2011-04-28 16:41:34
【问题描述】：

我有一个播放一次（不循环）的动画 GIF。我希望它在单击时动画。我尝试过这样的事情：

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

希望快速重置src 会触发动画，但没有运气。有谁知道该怎么做？

【问题讨论】：

disable cache for some images的可能重复

标签： javascript jquery gif animated-gif

【解决方案1】：

对于那些想要在它滚动到视图时执行此操作的人，我做了以下操作。

appear.js 的链接：https://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

我刚刚通过 attr('src') 加载了相同的 gif，在短暂的延迟后可见性。没有时间戳或随机字符功能。刚刚用了appear插件。

【讨论】：

【解决方案2】：

function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

如果你愿意，可以使用 jQuery 语法来完成它。

【讨论】：

【解决方案3】：

这是一种替代方法。

您可以将各个帧导出为自己的图像并通过 javascript 处理动画。

它可以让你做一些很酷的事情。一位同事最近制作了一个小计时器动画，该动画与我们图片库中可配置的幻灯片放映间隔同步。

您从中得到的另一件事是您可以使用 png 并具有半透明背景。

在某处可能有一个用于 javascript 的精灵动画库 :)

【讨论】：

【解决方案4】：

尝试使用随机生成的查询字符串添加图像，使其在浏览器中看起来像新图像。

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>

【讨论】：

我刚刚从互联网上抓取了一个随机字符串生成器：mediacollege.com/internet/javascript/number/random.html
谢谢你，你搞定了。但我认为我的方式更简单：$('#plus').attr('src','img/plus.gif?x='+Math.round(Math.random()*1000));
时间戳比随机生成的要好。也看这里 ==> stackoverflow.com/questions/728616/…
除非你可以在不到一毫秒的时间内点击两次图片，
@kennebec - 你可能不希望动画运行那么多次。

【解决方案5】：

您可以尝试使用单帧图像（动画的第一帧）并在点击时显示/隐藏每个图像。如果您希望在动画完成后将其重置为单帧图像，您可以使用 setTimeout（以动画的长度为时间长度）并让它隐藏动画并显示静态图像。

【讨论】：

【解决方案6】：

您是否尝试过删除 img 标签并重新添加它？（从未尝试过，只是一个想法）

【讨论】：