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编辑]

您也可以使用十六进制编辑器手动执行此操作。我使用＆＃34; Hex Fiend＆＃34;在macOS Sierra。

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

在21 F9 ...部分之前，插入以下十六进制，标记为＆＃34;应用程序扩展名＆＃34;在上面的照片中：

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

保存并测试。

Spektre的插件：注意21 F9标记gfx扩展块是可选的，因此它可能不适用于所有或任何帧（但这些天很少见）

Answer 2

您可以使用gifsicle command line tool处理动画gif并添加与所有浏览器兼容的正确循环：

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

所以在终端我这样做：

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

这会产生一个适用于Chrome＆amp; Firefox以及Safari。

Answer 3

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

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

Source

Answer 4

根据Spektre的回答编写PHP gif修复程序：

/**
 * 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);

    }

}

这会将image.gif的副本复制为_image.gif，并在colors table后插入所需的字符串并打印出新的src url。（检查图像是否已经先修复。）

用法：

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

或

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

免责声明：没有责任，我知道这可以优化：）

Answer 5

通常预先安装的ImageMagick：

convert -loop 0 bad.gif good.gif

Answer 6

似乎Gimp将允许您导出将正确循环的gif。打开gif，然后'File'＆gt; '导出为'并选中“As Animation”和“Loop Forever”复选框。我不知道这是否更新Spektre's answer中的文件，但我的测试图像在FireFox 60.0b8（64位），Chrome版本65.0.3325.181（官方版本）（64位）中正确循环，并且Safari版本9.1.1（11601.6.17）。

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

6 个答案: