javascript - 动画 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 文件第一帧中未记录的应用程序扩展。

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

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

这将迫使浏览器无限循环。

这是一个例子:

十六进制 View ，您可以看到它是如何添加的:

GIF 对插入/重新排序非图像数据 block 不敏感，因此您可以在任何其他扩展名之间的任何位置的第一张图像之前插入它。我直接放在header + palette之后。这可以用 C++ 或任何其他语言完成(不需要重新编码)。有关详细信息，请参阅:

• How to find where does Image Block start in GIF images?
• Decode data bytes of GIF87a raster data stream

---

[由 Reed Dunkle 编辑]

您也可以使用十六进制编辑器手动完成。我在 macOS Sierra 上使用了“Hex Fiend”。

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

在 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 扩展 block ，它是可选的，因此它可能不会出现在所有或任何帧中(但现在这种情况很少见)。