41

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

4

7 回答 7

19

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

  1. 在 Photoshop 中打开动画 gif。

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

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

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

那应该这样做。

于 2019-02-21T12:00:41.297 回答
9

你能知道 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. 而不是用画布渲染静态图像，保持静态图像版本并切换到停止循环。这可能是画布的大部分问题

于 2013-10-04T00:22:43.450 回答
5

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

两次迭代后停止的 gif

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

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

于 2016-04-03T00:12:16.623 回答
4

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

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

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

于 2013-10-04T01:18:54.617 回答
2

Jurijs Kovzels 的答案在某些情况下有效，但并非全部有效。
这取决于浏览器。
它适用于 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);

这是受这个答案的启发。

于 2021-02-27T02:37:41.033 回答
1

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

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

感谢所有的想法。

于 2013-10-04T06:45:21.377 回答
0

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.

于 2018-06-24T16:22:28.690 回答