jQuery 如何阻止动画 gif 循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19171075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop an animated gif from looping
提问by Steve
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 播放不止一次？
采纳答案by Steve
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.
感谢所有的想法。
回答by GuiDocs
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);
edit:I forgot to add reference to the original answer that I took this from, sorry
编辑：我忘了添加对我从中获取的原始答案的引用，抱歉
Stopping GIF Animation Programmatically
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)
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
Mark 提到：编辑 gif 本身以避免循环。如果可以，这是最好的选择。但我遇到过无法选择的情况（例如第三方自动生成图像）
而不是用画布渲染静态图像，保留静态图像版本并切换到停止循环。这可能与画布一样存在大部分问题
回答by Yuriy Galanter
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/
回答by Rishabh Agarwal
I was having the same problem with an animated gif. The solution is rather simple.
我在使用动画 gif 时遇到了同样的问题。解决方法相当简单。
Open the Animated gif in Photoshop.
Go to the Window tab and select timeline(if the timeline is not already open).
At the bottom of the timeline panel, you will find an option, which says "Forever". Change that to "Once".
Go to File> Export> Export for Web and save it as a gif.
在 Photoshop 中打开动画 gif。
转到“窗口”选项卡并选择时间线（如果时间线尚未打开）。
在时间线面板的底部，您会找到一个选项，上面写着“永远”。将其更改为“一次”。
转到文件> 导出> 导出为 Web 并将其另存为 gif。
That should do it.
那应该这样做。
回答by Jurijs Kovzels
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 中不起作用。
回答by Mukund Iyer
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。您必须选择文件位置。之后，您将收到一个带有设置的对话框。在其中，添加您希望动画发生的次数。单击确定。问题解决了。
