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

Question

我有一个动画gif,我想在页面加载时显示.当我在浏览器之外查看图像时,图像无限循环并且工作得很好,但每当我在浏览器中显示图像时,动画只会循环一次.有没有人有任何建议使图像无限循环？

目前我只是这样做以使图像出现,使其显示,但只循环一次:

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

Answer 1

我在前一段时间写的GIF编码器/解码器类面临同样的问题(并且不时改进).我昨天才发现了解决方案.该GIF是完全没问题是现代互联网浏览器的一侧.受感染的浏览器是Opera,IE,Chrome(没有测试其他人).

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

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

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

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

这里的例子:

十六进制视图,以便您了解它的添加方式:

该GIF不在插入/重新排序数据的非图像块,所以你可以在任何其他分机之间的任何地方第一张图像之前插入此敏感.我把它直接放在标题+调色板之后.可以使用C++或任何其他语言来完成.(不需要重新编码).有关详情,请参阅:

[由Reed Dunkle编辑]

您也可以使用十六进制编辑器手动完成.我在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的Addon:注意21 F9标记gfx扩展块是可选的,所以它可能不适用于所有或任何帧(但这些日子真的很少见)

Answer 2

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

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

所以在航站楼我做:

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

这产生了一个新的动画GIF,适用于Chrome和Firefox以及Safari.

Answer 3

使用 ImageMagick，通常预装：

convert -loop 0 bad.gif good.gif

Answer 4

您可以指定有限数量的循环，也可以使电影永远循环。只要页面在屏幕上，INFINITE（或 -1）就会一遍又一遍地循环播放影片。例如，以下代码生成一部连续循环的电影：

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