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

Animated gif only loops once in Chrome and Firefox

提问by Ryan

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?

我有一个动画 gif，我想在加载页面时随时显示。当我在浏览器外查看图像时，图像会无限循环并且效果很好，但是每当我在浏览器中显示图像时，动画只会循环一次。有没有人对无限循环图像有任何建议？

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..">';

回答by Spektre

I was facing the same problem with my GIFencoder/decoder class I wrote some time ago (and improving with time to time). I found out the solution for this just yesterday. The GIFis completely fine the problem is on modern internet browser's side. Infected browsers are Opera,IE,Chrome (didn't test others).

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

After some investigation on the matter (by comparing looping and non looping images) I found out that these browsers GIFdecoders are ignoring the looping parameters in GIFfile. Instead they are depending on undocumented application extension in the first frame of GIFfile.

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

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.

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

Here example:

这里的例子：

Hex view so you see how it is added:

十六进制视图，以便您查看它是如何添加的：

The GIFis not sensitive on inserting/reordering non image chunks of data so you can insert this before first image on 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:

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

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

• 如何在GIF图像中找到Image Block从哪里开始？
• 解码 GIF87a 光栅数据流的数据字节

---

---

[Edit by Reed Dunkle]

[里德·邓克尔编辑]

You can also do it manually with a Hex Editor. I used "Hex Fiend" on macOS Sierra.

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

Search for 21 F9in 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在十六进制的开头部分搜索（这是标题）。在上面的照片中，它是21 F9 04 04 00 00 00 00。您的可能略有不同，但请注意它出现在 之前2C，它标志着图像块的开始。

Before the 21 F9... portion, insertthe following hex, marked as the "application extension" in the photo above:

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

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

Save, and test it.

保存，测试一下。

Addon by Spektre: Beware 21 F9marks gfx extension chunk which is optional so It may not be present for all or any frames (but that is really rare these days)

Spektre 的插件：当心21 F9标记 gfx 扩展块，这是可选的，所以它可能不存在于所有或任何帧中（但现在这种情况非常罕见）

回答by Matt Sephton

You can use the gifsicle command line toolto process an animated gif and add in the correct looping that is compatible with all browsers:

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

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

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

so in Terminal I do:

所以在终端我做：

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

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

Which produces a new Animated GIF that works in Chrome & Firefox as well as Safari.

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

回答by YvesgereY

With ImageMagick, often pre-installed:

使用 ImageMagick，通常预装：

convert -loop 0 bad.gif good.gif

回答by minimal

You can either state a finite number of loops, or you can make the movie loop forever. INFINITE (or -1) loops the movie over and over as long as the page is on the screen. For example, this code produces a movie which loops continuously:

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

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

Source

来源

回答by Rauli Rajande

Wrote PHP gif fixer based on answer by Spektre:

根据 Spektre 的回答编写了 PHP gif fixer：

/**
 * gif image loop fixer, prints image full url
 * 
 * as this is written as a part of framework, there are some config options
 */

// put your images absolute path here eg '/var/www/html/www.example.com/images/'
// or use autodetection below
$GLOBALS['config']['upload_path'] = str_replace("\", "/", trim(getcwd(), " /\")).'/images/';

// put your images relative/absolute url here, eg 'http://www.example.com/images/';
$GLOBALS['config']['upload_url'] = '/images/';

function _ig($image){

    $image_a = pathinfo($image);

    $new_filename = $GLOBALS['config']['upload_path'].$image_a['dirname'].'/_'.$image_a['filename'].'.'.$image_a['extension'];
    $new_url = $GLOBALS['config']['upload_url'].$image_a['dirname'].'/_'.$image_a['filename'].'.'.$image_a['extension'];

    if ($image_a['extension'] == 'gif'){

        if (!file_exists($new_filename)){

            // load file contents
            $data = file_get_contents($GLOBALS['config']['upload_path'].$image);

            if (!strstr($data, 'NETSCAPE2.0')){

                // gif colours byte
                $colours_byte = $data[10];

                // extract binary string
                $bin = decbin(ord($colours_byte));
                $bin = str_pad($bin, 8, 0, STR_PAD_LEFT);

                // calculate colour table length
                if ($bin[0] == 0){
                    $colours_length = 0;
                } else {
                    $colours_length = 3 * pow(2, (bindec(substr($bin, 1, 3)) + 1)); 
                }

                // put netscape string after 13 + colours table length
                $start = substr($data, 0, 13 + $colours_length);
                $end = substr($data, 13 + $colours_length);

                file_put_contents($new_filename, $start . chr(0x21) . chr(0xFF) . chr(0x0B) . 'NETSCAPE2.0' . chr(0x03) . chr(0x01) . chr(0x00) . chr(0x00) . chr(0x00) . $end);

            } else {

                file_put_contents($new_filename, $data);

            }

        }

        print($new_url);

    } else {

        print($GLOBALS['config']['upload_url'].$image);

    }

}

This makes copy of the image.gif as _image.gif with needed string inserted after colours table and prints out new src url. (Checks if the image is already fixed first.)

这将 image.gif 复制为 _image.gif，并在颜色表之后插入所需的字符串并打印出新的 src url。（首先检查图像是否已经固定。）

Usage:

用法：

<img src="<?php _ig($image); ?>">

or

或者

<img src="<?php _ig('image.gif'); ?>">

Disclaimer: no responsibilities taken and I know that this can be optimised :)

免责声明：不承担任何责任，我知道这可以优化:)

回答by origamifreak2

It seems that Gimpwill allow you to export a gif that will loop properly. Just open the gif, then 'File' > 'Export As' and check the "As Animation" and "Loop Forever" checkboxes. I don't know if this updates the file as in Spektre's answer, but my test image looped correctly in FireFox 60.0b8 (64-bit), Chrome Version 65.0.3325.181 (Official Build) (64-bit), and Safari Version 9.1.1 (11601.6.17).

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