我在 img 标记中有一个动画 gif，我从重写 src 属性开始。但是，创建 gif 是为了循环播放，我只希望它播放一次。有没有办法使用 Javascript 或 jQuery 来阻止动画 gif 多次播放？
【问题讨论】：
save-for-web在photoshop中重新保存，然后在右下角的循环选项下选择once
标签： javascript jquery
你能知道 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);
编辑： 我忘了添加对我从中获取的原始答案的引用，抱歉
Stopping GIF Animation Programmatically
这不能解决你只需要一个循环的时间因素
另外，有人提到这种方法在某些情况下是有问题的（当我现在在 Firefox 中尝试它时它实际上不起作用......）。所以这里有一些选择：
Mark 提到：编辑 gif 本身以避免循环。如果可以的话，这是最好的选择。 但我遇到过无法选择的情况（例如第三方自动生成图像）
而不是使用画布渲染静态图像，keep a static image version and switch to stop looping。这可能是画布的大部分问题
【讨论】：
基于this answer，它有点贵，但它有效。假设一个循环需要 2 秒。在 2 秒后的 setTimeout 中启动 setInterval，每毫秒重置一次图像源：
setTimeout(function() {
setInterval(function() {
$('#img1').attr('src',$('#img1').attr('src'))
},1)
}, 2000)
同样，可能只是概念验证，但这里是演示：http://jsfiddle.net/MEaWP/2/
【讨论】：
不确定这是否是回应所有人并让它出现在所有先前的答案和 cmets 之后的最佳方式，但它似乎有效。
我对 gif 没有太多控制权。人们在他们的帐户目录中发布他们想要的任何 gif 作为“thankyou.gif”，然后当评论提交到他们发布的表单时，ThankYou 代码运行他们放在那里的任何东西。所以有些可能会循环，有些可能不会，有些可能很短，有些可能很长。我想到的解决方案是告诉人们让它们 5 秒，因为那是我要淡出它们的时候，我不在乎它们是否循环.
感谢所有的想法。
【讨论】：
实际上，可以在一次迭代或任何特定次数的迭代后停止 gif，请参见下面的示例（如果尚未停止），或在 jsfiddle 中。
为此，必须创建 gif 并指定迭代次数。这可以使用Screen to Gif 来完成，它允许打开一个 gif 或一堆图像并逐帧编辑它。
此解决方案还允许您通过 imgElem.src = imgElem.src; 重置动画，但这在 MS IE/Edge 中不起作用。
【讨论】：
我知道我来晚了，但是..这里是...
我不知道你是否会做到这一点，但让我分享一个技巧。
在 Macromedia Flash 8 中打开 GIF（此后已弃用），将 GIF 导出为动画 GIF。您必须选择文件位置。之后，您将收到一个包含设置的对话框。在那里，添加您希望动画发生的次数。单击确定。问题解决了。
【讨论】：
我在使用动画 gif 时遇到了同样的问题。解决方案相当简单。
在 Photoshop 中打开动画 gif。
转到“窗口”选项卡并选择时间线（如果时间线尚未打开）。
在时间线面板的底部，您会找到一个选项，上面写着“永远”。 将其更改为“一次”。
转到文件> 导出> 导出为 Web 并将其保存为 gif。
应该可以的。
【讨论】：
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的启发。
【讨论】：