Question

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

Answer 1

你能找出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

修改我忘了添加对我拍摄的原始答案的引用，抱歉

Stopping GIF Animation Programmatically

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

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

Mark提到的

：编辑gif本身以避免循环。如果可以的话，这是最好的选择。但是我遇到了不能选择的情况（比如第三方自动生成图像）

而不是使用画布keep a static image version and switch to stop looping渲染静态图像。这可能是帆布的大部分问题

Answer 2

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

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

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

Answer 3

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

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

感谢所有想法。

Answer 4

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

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

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

Answer 5

我知道我来晚了，但是..在这里...

我不知道你是否愿意花那么多时间，但让我分享一个窍门。

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

Answer 6

我在使用动画gif时遇到了同样的问题。解决方案非常简单。

在Photoshop中打开动画gif。
转到“窗口”选项卡，然后选择时间线（如果时间线尚未打开）。
在时间轴面板的底部，您将找到一个选项，显示“永远”。将其更改为“一次”。
转到“文件”>“导出”>“导出为Web”并将其另存为gif。

应该这样做。

Answer 7

Jurijs Kovzels's answer 在某些情况下有效，但不是在所有情况下都有效。
这取决于浏览器。
它适用于 Firefox。但是在 Google Chrome 和 Safari 中，如果 gif 在同一台服务器上则不起作用。他提供的示例有效，因为 gif 位于外部服务器上。
要使用 Google Chrome 和 Safari 重新启动存储在内部服务器上的 gif，您需要执行额外的步骤才能使其正常工作。

const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => {
  img.src = img.src;
}, 0);

这是受this answer的启发。

如何阻止动画gif循环播放

7 个答案: