如何使用JS触发GIF动画？

Question

如何使用JS触发GIF动画？

7

我有一个只播放一次（不循环）的动画GIF。我希望它在被点击时能够播放动画。我尝试了以下代码：

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

希望通过快速重置 src 来触发动画，但没有成功。有人知道怎么做吗？

- Isaac Lubow

可能是禁用某些图片的缓存的重复问题。 - Peter Ajtai

6个回答

2

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

如果您愿意，可以使用jQuery语法来装扮它。

- kennebec

1

这是一种有些不同寻常的方法。

您可以将单独的帧导出为它们自己的图像，并通过javascript处理动画。

它让您做一些很酷的事情。最近，我的一个同事有一个小计时器动画，它与我们的图像库中可配置的幻灯片间隔同步。

另外一个好处是您可以使用png并具有半透明背景。

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

- Koobz

0

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

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');
    });
});

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

- sledgeweight

0

你试过移除img标签然后再添加回来吗？（我没有尝试过，只是一个想法）

- mdrg

0

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

- Richard Marskell - Drackir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adam0101 · Accepted Answer

尝试使用随机生成的查询字符串添加图像，这样浏览器就会将其视为新图像。

<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>