动画 gif 仅在 Chrome 和 Firefox 中循环一次

IT技术 javascript html firefox google-chrome animated-gif
2021-03-17 15:25:24

我有一个动画 gif,我想在加载页面时随时显示。当我在浏览器外查看图像时,图像会无限循环并且工作正常,但是每当我在浏览器中显示图像时,动画只会循环一次。有没有人对无限循环图像有任何建议?

目前我只是这样做是为了让图像出现,这确实让它出现,但只循环一次:

document.getElementById('ajaxloader').innerHTML = 
    '<img src="images/ajax-loader.gif" title="Loading, please wait..">';
6个回答

前段时间写的GIF编码器/解码器类也面临同样的问题(并且不时改进)。我昨天才找到解决方案。GIF是完全没问题是在现代互联网浏览器的一侧。受影响的浏览器是 Opera、IE 和 Chrome(未测试其他浏览器)。

经过对此事的一些调查(通过比较循环和非循环图像),我发现这些浏览器的GIF解码器忽略了GIF文件中的循环参数相反,它们依赖于GIF文件第一帧中未记录的应用程序扩展名

所以解决方案是在第一帧图像数据之前添加这个扩展命令。添加这个块:

0x21,0xFF,0x0B,"NETSCAPE","2.0",0x03,0x01,0x00,0x00,0x00

这将迫使浏览器无休止地循环。

下面是一个例子:

循环

十六进制视图,以便您了解它是如何添加的:

十六进制

GIF不在插入/重新排序数据的非图像块,这样你就可以在任何其他分机之间的任意位置的第一张图像之前插入此敏感。我直接把它放在标题+调色板之后。这可以用C++或任何其他语言来完成(不需要重新编码)。有关更多信息,请参阅:


[里德·邓克尔编辑]

您也可以使用十六进制编辑器手动执行此操作。我在 macOS Sierra 上使用了“Hex Fiend”。

21 F9在十六进制的开头部分搜索(这是标题)。在上面的照片中,它是21 F9 04 04 00 00 00 00您的可能略有不同,但请注意它出现在 之前2C,它标志着图像块的开始。

21 F9... 部分之前插入以下十六进制,在上图中标记为“应用程序扩展名”:

21 FF 0B 4E 45 54 53 43 41 50 45 32 2E 30 03 01 00 00 00

保存,测试一下。

Spektre 的插件:当心:21 F9标记 gfx 扩展块,这是可选的,因此它可能不会出现在所有或任何帧中(但现在这种情况非常罕见)。

@Spektre 感谢您指出 Rauli 的脚本,我错过了它的相关性。我不同意这是唯一的方法(请参阅我的答案以获得更优雅的解决方案),并且也不可能通过标记控制循环。
2021-04-17 15:25:24
这绝对有效,应该被接受为最佳答案。
2021-05-07 15:25:24
@MattSephton 谁会手动执行此操作?简单的脚本可以轻松完成(就像 Rauli Rajande 所做的那样)......所有的信息都在答案和底部的 2 个链接中,如果一个人无法访问,这也是唯一的方法页面代码本身就像 SO/SE 上的这里一样......在这种情况下,常见的解决方法不适用
2021-05-09 15:25:24
有更简单的答案可以避免可能的人为错误。十六进制编辑文件很困难!@grimlek
2021-05-13 15:25:24
“受感染的浏览器” xD
2021-05-15 15:25:24

您可以使用gifsicle 命令行工具来处理动画 gif 并添加与所有浏览器兼容的正确循环:

Animation options: -l, --loopcount[=N] Set loop extension to N (default forever).

所以在终端我做:

$ gifsicle --loopcount problem.gif > fixed.gif

它生成了一个新的动画 GIF,可在 Chrome 和 Firefox 以及 Safari 中使用。

正是我要找的:)
2021-04-20 15:25:24

使用 ImageMagick,通常预装:

convert -loop 0 bad.gif good.gif
你是我的英雄
2021-05-12 15:25:24

似乎Gimp将允许您导出可以正确循环的 gif。只需打开 gif,然后“文件”>“导出为”并选中“作为动画”和“永远循环”复选框。我不知道这是否会像Spektre 的回答那样更新文件,但是我的测试图像在 FireFox 60.0b8(64 位)、Chrome 版本 65.0.3325.181(官方版本)(64 位)和 Safari 版本 9.1 中正确循环.1 (11601.6.17)。永远的 gimp 循环

您可以声明有限数量的循环,也可以使电影永远循环。只要页面在屏幕上,INFINITE(或 -1)就会一遍又一遍地循环播放电影。例如,此代码生成一个连续循环的电影:

<img 
  src="../graphics/moonflag.mpg" 
  dynsrc="../graphics/moonflag.mpg"
  loop=infinite
  alt="Astronauts on the moon">

来源

这是错误的答案,已弃用的循环属性仅适用于电影,不适用于 GIF。循环在 GIF 中编码,而不是图像标签。
2021-05-06 15:25:24
stackoverflow.com/a/19808575/1256925 - 通常小写字母更容易输入和阅读。
2021-05-07 15:25:24