如何阻止动画gif循环播放

Question

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

Answer 1

我在使用动画 gif 时遇到了同样的问题。解决方法相当简单。

1. 在 Photoshop 中打开动画 gif。

2. 转到“窗口”选项卡并选择时间线（如果时间线尚未打开）。

3. 在时间线面板的底部，您会找到一个选项，上面写着“永远”。将其更改为“一次”。

4. 转到文件> 导出> 导出为 Web 并将其另存为 gif。

那应该这样做。

Answer 2

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

伪代码:

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

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

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

以编程方式停止GIF动画

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

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

1. Mark提到:编辑gif本身以避免循环.如果可以的话,这是最好的选择.但是我遇到了不能选择的情况(比如第三方自动生成图像)

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

Answer 3

根据这个答案，它有点贵，但它有效。假设一个循环需要 2 秒。在 setTimeout 2 秒后启动 setInterval，这将每毫秒重置图像源：

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

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

Answer 4

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

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

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

Answer 5

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

我对 gif 没有太多控制权。人们在他们的帐户目录中发布他们想要的任何 gif 作为“thankyou.gif”，然后当评论提交到他们发布的表单时，ThankYou 代码会运行他们放置的任何内容。所以有些可能会循环，有些可能不会，有些可能很短，有些可能很长。我找到的解决方案是告诉人们让它们持续 5 秒，因为那时我会让它们淡出，而且我不在乎它们是否循环。

感谢所有的想法。