Javascript 如何阻止动画gif循环

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

您能知道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);

编辑： 我忘了给我的原始答案加上参考，抱歉

这一个不能解决您只需要一个循环的时间因素

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

Mark提到：编辑gif本身以避免循环。如果可以的话，这是最好的选择。 但我遇到过这样的情况：它不是一个选项（比如由第三方自动生成图像）

而不是使用画布渲染静态图像。这可能和画布的问题一样多

据我所知，这有点贵，但它很管用。假设一个循环需要2秒钟。在setInterval中启动2秒后的setTimeout时，将每毫秒重置一次图像源：

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

---

同样，这可能只是一个概念证明，但这里有一个演示：

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

我对gif没有太多的控制权。人们发布他们想要的任何gif作为“Thankyu.gif在他们的帐户目录中，然后当评论提交到他们发布的表单时，Thankyu代码将运行他们放在那里的任何内容。所以有些可能是循环的，有些可能不是，有些可能是短的，有些可能是长的。我找到的解决办法是告诉人们让他们休息5秒钟，因为那时我将淡出他们，我不在乎他们是否循环

---

谢谢你的建议

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

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

---

此解决方案还允许您通过

imgElem.src=imgElem.src重置动画但这在MS IE/Edge中不起作用。
我知道我来晚了，但..在这里

我不知道你是否会走到这个长度，但让我分享一个技巧

在Macromedia Flash 8中打开GIF（从那时起就不再推荐使用），将GIF导出为动画GIF。您必须选择文件位置。之后，您将收到一个带有设置的对话框。在其中，添加希望动画发生的次数。单击“确定”。问题解决。
我在使用动画gif时遇到了同样的问题。解决办法相当简单

在Photoshop中打开动画gif

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

在时间线面板的底部，你会发现一个选项，上面写着“永远”。
把它改成“一次”

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

这应该可以做到。
在某些情况下有效，但并非在所有情况下都有效

这取决于浏览器

它与Firefox配合得很好。但在谷歌Chrome和Safari中，如果gif在同一台服务器上，则不起作用。他提供的示例之所以有效，是因为gif位于外部服务器上

要使用Google Chrome和Safari重新启动存储在内部服务器上的GIF，您需要额外的步骤才能使其正常工作

const img=document.getElementById（“gif”）；
img.style=“显示：无；”；
img.style=“显示：块；”；
设置超时（（）=>{
img.src=img.src；
}, 0);

这篇文章的灵感来自。
vist这篇文章你能修改gif以关闭“循环”选项吗？这不是一个真正的javascript问题，你应该找到编辑动画gif的软件，只需删除循环选项。请参见以下答案：使用
保存为web
在photoshop中重新保存，并在右下角的循环选项下选择
一次
，将IMG的SRC替换为静态图像不是更简单吗？显示gif所有帧所需的时间将是可变的，例如，慢速连接将花费更长的时间。@YuriyGaranter是的，它会更简单。更简单的是，只需获得gif的非循环版本。但我已经看到了对这些选项的评论，所以我提供了这个解决方案，以避免重复。是否有任何不粗略的macromedia flash 8版本？现在肯定还有其他免费的gif工具吗？是的。我完全同意这一点。但Macromedia提供了适当的专业工具来处理GIF。此外，我记得Macromedia Flash的主要目的是为网站编辑这些奇特的元素。在GIF屏幕中，如何选择迭代次数？？？@ddor254它是文件菜单->另存为…->GIF-GIF选项面板。取消选中repeat forever并设置repeat count。似乎OP允许用户添加GIF，所以很可能这里不允许使用Photoshop。谢谢，这对我帮助很大！还提供了一个用于“gif循环计数转换器”的在线工具