如何阻止动画gif循环播放

I have an animated gif in an img tag that I start by rewriting the src attribute. The gif was created, though, to loop and I only want it to play once. Is there a way, with Javascript or jQuery, to stop an animated gif from playing more than once?

我在img标签中有一个动画gif，我从重写src属性开始。但是，创建了gif循环，我只希望它播放一次。有没有办法，使用Javascript或jQuery，阻止动画gif不止一次播放？

5 个解决方案

#1

can you find out how long the gif takes to loop once? if so then you can stop the image like this:

你能找出gif循环一次的时间吗？如果是这样，那么你可以像这样停止图像：

pseudocode:

伪代码：

wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze

javascript:

JavaScript的：

var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
    c.getContext('2d').drawImage(img, 0, 0, w, h);
    $(img).hide();
    $(c).show();
},10000);

jsfiddle

的jsfiddle

edit: I forgot to add reference to the original answer that I took this from, sorry

编辑：我忘了添加对我拍摄的原始答案的引用，抱歉

Stopping GIF Animation Programmatically

以编程方式停止GIF动画

that one doesn't address the time factor you need for only one loop

那个没有解决你只需要一个循环所需的时间因素

Also, it has been mentioned that this approach is problamatic in certain cases (It actually didn't work when I try it in firefox right now...). so here are a few alternatives:

此外，有人提到这种方法在某些情况下是有问题的（当我现在在firefox中尝试时它实际上不起作用......）。所以这里有几个选择：

mentioned by Mark: edit the gif itself to avoid looping. this is the best option if you can. but I've run into cases where it was not an option (like automated generation of images by a third party)

Mark提到：编辑gif本身以避免循环。如果可以的话，这是最好的选择。但是我遇到了不能选择的情况（比如第三方自动生成图像）
instead of rendering the static image with canvas, keep a static image version and switch to stop looping . this probablyhas most of the problems as the canvas thing

而不是使用画布渲染静态图像，保持静态图像版本并切换到停止循环。这可能是帆布的大部分问题

#2

Based on this answer, it's kinda expensive, but it works. Let's say a single loop takes 2 seconds. At a setTimeout after 2 seconds kick in a setInterval, that would reset image source every millisecond:

基于这个答案，它有点贵，但它的工作原理。假设一个循环需要2秒。在setInterval中经过2秒后的setTimeout，这将每毫秒重置一次图像源：

setTimeout(function() {
    setInterval(function() {
        $('#img1').attr('src',$('#img1').attr('src'))
    },1)
}, 2000)

again, probably just a proof of concept, but here's demo: http://jsfiddle.net/MEaWP/2/

再次，可能只是一个概念证明，但这里的演示：http：//jsfiddle.net/MEaWP/2/

#3

Not sure if this is the best way to respond to everyone and have it appear after all the previous answers and comments, but it seems to work.

不确定这是否是回应所有人的最佳方式，并且在所有之前的答案和评论之后出现，但它似乎有效。

I don't have much control over the gif. People post whatever gif they want as the "thankyou.gif in their account directory and then the ThankYou code runs whatever they've put there when a comment is submitted to a form they've posted. So some may loop, some may not, some may be short, some may be long. The solution I've come to is to tell people to make them 5 seconds, because that's when I'm going to fade them out, and I don't care if they loop or not.

我对gif没有多少控制权。人们在他们的帐户目录中发布他们想要的任何gif作为“thankyou.gif”，然后当一个评论被提交到他们发布的表单时，ThankYou代码运行他们放在那里的任何东西。所以有些可能循环，有些可能没有，有些可能很短，有些可能很长。我遇到的解决方法是告诉人们让它们5秒钟，因为那时我会淡出它们，我不在乎它们是否循环。

Thanks for all the ideas.

感谢所有的想法。

#4

Actually it is possible to make a gif to stop after just one iteration or any specific number of iterations, see an example below (if it is not already stopped), or in jsfiddle.

实际上，只需一次迭代或任何特定次数的迭代就可以使gif停止，参见下面的示例（如果它尚未停止），或者在jsfiddle中。

To do that the gif must be created with number of iterations specified. This could be done using Screen to Gif, it allows to open a gif or a bunch of images and edit it frame by frame.

为此，必须使用指定的迭代次数创建gif。这可以使用Screen to Gif来完成，它允许打开gif或一堆图像并逐帧编辑。

This solution also allows you to reset the animation by imgElem.src = imgElem.src; but this does not work in MS IE/Edge.

此解决方案还允许您通过imgElem.src = imgElem.src重置动画;但这在MS IE / Edge中不起作用。

#5

I know I am pretty late here but..here it is...

我知道我在这里已经很晚了但是......它在......

I don't know if you would go to this length but let me share a trick.

我不知道你是否会这么长，但让我分享一个技巧。

Open the GIF in Macromedia Flash 8(it has deprecated since then), Export the GIF as Animated GIF. You will have to choose the file location. After that you would receive a dialog box with settings. In that, add the number of times you want the animation to happen. Click OK. Problem solved.

在Macromedia Flash 8中打开GIF（从那时起已经弃用），将GIF导出为动画GIF。您必须选择文件位置。之后，您将收到一个包含设置的对话框。在那里，添加你想要动画发生的次数。单击确定。问题解决了。

#1