gif动画只播放一次onclick和mousedown

我有两个图像：静态和动画。 我试图播放动画图像但只播放一次。 之后，它将变为静态的。

我的代码：

$(document).ready(function () { $('#targetDIV_three').bind('click mousedown', function () { srcToGif2 = "http://sofzh.miximages.com/javascript/s3.gif"; $("#divthree_three").attr('src', srcToGif2); }); }); 

小提琴： http ： //jsfiddle.net/squidraj/33Sqd/

目前，它不会在第一个动画后停止。

---

单动画循环gif的最新小提琴。

http://jsfiddle.net/squidraj/4rC8D/1/

现在看不到img src正在改变的动画。

Answer 1

如果您希望此动画GIF只播放一次，请在Photoshop中进行修改。 转到窗口>时间轴，然后选择循环选项（左下角）：

以网络forms保存为GIF和瞧！

Answer 2

工作小提琴

试试这个：

 $(document).ready(function () { $('#targetDIV_three').bind('click mousedown', function () { [].slice.apply(document.images).filter(is_gif_image).map(freeze_gif); function is_gif_image(i) { return /^(?!data:).*\.gif/i.test(i.src); } function freeze_gif(i) { var c = document.createElement('canvas'); var w = c.width = i.width; var h = c.height = i.height; c.getContext('2d').drawImage(i, 0, 0, w, h); try { i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects } catch(e) { // cross-domain -- mimic original with all its tag attributes for (var j = 0, a; a = i.attributes[j]; j++) c.setAttribute(a.name, a.value); i.parentNode.replaceChild(c, i); } } }); }); 

为了获得所需的效果，您可以通过setTimeout触发点击事件#targetDIV_three

Answer 3

为此编写代码。 设置超时以再次设置旧的gif。

 $(document).ready(function () { $('#targetDIV_three').bind('click mousedown', function () { srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif"; $("#divthree_three").attr('src', srcToGif2); setTimeout(function(){ $("#divthree_three").attr('src', "http://demo.pink-squid.co.uk/christmas/s3_bg.gif"); },900); }); }); 

http://jsfiddle.net/33Sqd/2/