动画 gif 仅在 Chrome 和 Firefox 中循环一次 [英] Animated gif only loops once in Chrome and Firefox
问题描述
我有一个动画 gif，我想在加载页面时随时显示它.当我在浏览器外查看图像时，图像会无限循环并且效果很好，但是每当我在浏览器中显示图像时，动画只会循环一次.有没有人有任何让图像无限循环的建议?
I have an animated gif that I want to display any time a page is loading. When I view the image outside of a browser, the image loops infinitely and works just fine, but whenever I'm displaying the image in a browser, the animation only loops once. Does anyone have any suggestions for making the image loop infinitely?
目前我只是这样做是为了使图像出现，这确实使它出现，但只循环一次:
Currently I'm just doing this to make the image appear which does make it appear, but only loops once:
document.getElementById('ajaxloader').innerHTML =
'<img src="images/ajax-loader.gif" title="Loading, please wait..">';
推荐答案
我之前写的 GIF 编码器/解码器类遇到了同样的问题(并且不时改进).我昨天才找到解决方案.GIF 完全没问题，问题出在现代互联网浏览器方面.受影响的浏览器包括 Opera、IE 和 Chrome(其他未测试).
I was facing the same problem with my GIF encoder/decoder class I wrote some time ago (and improving from time to time). I found out the solution for this just yesterday. The GIF is completely fine the problem is on a modern internet browser's side. Affected browsers are Opera, IE, and Chrome (didn't test others).
经过一番调查(通过比较循环和非循环图像)，我发现这些浏览器的GIF解码器忽略了GIF中的循环参数文件.相反，它们依赖于 GIF 文件第一帧中未记录的应用程序扩展.
After some investigation on the matter (by comparing looping and non-looping images), I found out that these browsers' GIF decoders are ignoring the looping parameters in GIF files. Instead they are depending on an undocumented application extension in the first frame of GIF file.
所以解决方案是在第一帧图像数据之前添加此扩展命令.添加这个块:
So the solution is to add this extension command just before first frame image data. Add this chunk:
0x21,0xFF,0x0B,"NETSCAPE","2.0",0x03,0x01,0x00,0x00,0x00
这将迫使浏览器无休止地循环.
This will force browsers to loop endlessly.
这是一个例子:
十六进制视图，以便您了解它是如何添加的:
Hex view so you see how it is added:
GIF 对插入/重新排序非图像数据块不敏感，因此您可以在任何其他扩展名之间的任何位置将其插入到第一张图像之前.我直接把它放在标题+调色板之后.这可以用 C++ 或任何其他语言来完成(不需要重新编码).有关更多信息，请参阅:
The GIF is not sensitive on inserting/reordering non-image chunks of data, so you can insert this before the first image in any place between any other extension. I put it directly after header + palette. Which can be done with C++ or any other language (no re-encoding is needed). For more info see:
[Reed Dunkle 编辑]
您也可以使用十六进制编辑器手动完成.我用过妖魔"在 macOS Sierra 上.
You can also do it manually with a Hex Editor. I used "Hex Fiend" on macOS Sierra.
在十六进制的开头部分搜索21 F9(这是标题).在上图中，它是21 F9 04 04 00 00 00 00.您的可能略有不同，但请注意它出现在 2C 之前，它标志着图像块的开始.
Search for 21 F9 in the beginning portions of hex (this is the header). In the photo above, it is 21 F9 04 04 00 00 00 00. Yours could be slightly different, but notice it comes before 2C, which marks the beginning of an image block.
在 21 F9... 部分之前，插入以下十六进制，标记为应用程序扩展"在上面的照片中:
Before the 21 F9... portion, insert the following hex, marked as the "application extension" in the photo above:
21 FF 0B 4E 45 54 53 43 41 50 45 32 2E 30 03 01 00 00 00
保存并测试.
Spektre 的插件:注意:21 F9 标记 gfx 扩展块，这是可选的，因此它可能不会出现在所有或任何帧中(但现在这种情况非常罕见).
Addon by Spektre: Beware: 21 F9 marks gfx extension chunk which is optional so it may not be present for all or any frames (but that is really rare these days).
这篇关于动画 gif 仅在 Chrome 和 Firefox 中循环一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
