web-dev-qa-db-ja.com

アニメーションgifは、ChromeおよびFirefoxで1回だけループします

ページの読み込み中に表示したいアニメーションgifがあります。ブラウザの外部で画像を表示すると、画像は無限にループして正常に動作しますが、ブラウザで画像を表示するたびに、アニメーションは1回だけループします。画像を無限にループさせるための提案はありますか？

現在、画像を表示するためにこれを行っていますが、画像は表示されますが、ループは1回だけです：

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

私は[〜＃〜] gif [〜＃〜]エンコーダー/デコーダークラスで同じ問題に直面していました。時々）。昨日、これに対する解決策を見つけました。 [〜＃〜] gif [〜＃〜]は完全に問題ありません。問題は現代のインターネットブラウザ側にあります。感染したブラウザはOpera、IE、Chromeです（他のブラウザはテストしていません）。

（ループ画像と非ループ画像を比較することにより）問題を調査した結果、これらのブラウザ[〜＃〜] gif [〜＃〜]デコーダーは[〜＃〜] gif [〜＃〜]ファイルのループパラメーターを無視します。代わりに、[〜＃〜] gif [〜＃〜]ファイルの最初のフレームで文書化されていないアプリケーション拡張機能に依存しています。

したがって、解決策は、この拡張コマンドを最初のフレーム画像データの直前に追加することです。このチャンクを追加します。

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

これにより、ブラウザは無限にループします。

ここに例：

looping

16進表示で、追加方法を確認できます。

hex

[〜＃〜] gif [〜＃〜]は、データの非画像チャンクの挿入/並べ替えに敏感ではないため、最初の画像の前にこれを挿入できます他の拡張機能の間の任意の場所。ヘッダー+パレットの直後に配置します。これは、C++またはその他の言語で実行できます。 （再エンコードは不要です）。詳細については、以下を参照してください。

[リード・ダンクル編集]

Hex Editorを使用して手動で行うこともできます。 macOS Sierraで「Hex Fiend」を使用しました。

検索する 21 F9 16進数の先頭部分（これはヘッダーです）。上の写真では、21 F9 04 04 00 00 00 00。多少異なる場合がありますが、2C、画像ブロックの開始をマークします。

の前に 21 F9...部分、insert次の16進数。上の写真で「アプリケーション拡張機能」としてマークされています。

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

保存してテストします。

アドオンby Spektre：注意21 F9はオプションのgfx拡張チャンクにマークを付けるため、すべてまたはすべてのフレームに存在しない場合があります（しかし、最近では非常にまれです）

20
Spektre

gifsicleコマンドラインツール を使用して、アニメーションgifを処理し、すべてのブラウザーと互換性のある正しいループを追加できます。

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

ターミナルで：

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

これはChrome＆FirefoxおよびSafariで動作する新しいアニメーションGIFを生成します。

18
Matt Sephton

ImageMagickでは、多くの場合プリインストールされています：

convert -loop 0 bad.gif good.gif
2
YvesgereY

有限数のループを指定するか、ムービーを永久にループさせることができます。 INFINITE（または-1）は、ページが画面上にある限り、ムービーを繰り返しループします。たとえば、次のコードは連続的にループするムービーを生成します。

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

ソース

2
minimal

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

    }

}

これにより、image.gifのコピーが_image.gifとして作成され、カラーテーブルの後に必要な文字列が挿入され、新しいsrc urlが出力されます。 （最初に画像が既に修正されているかどうかを確認します。）

使用法：

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

または

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

免責事項：責任を負いません。これは最適化できることを知っています:)

1
Rauli Rajande

Gimp を使用すると、適切にループするgifをエクスポートできるようです。 gifを開き、[ファイル]> [名前を付けてエクスポート]を選択して、[アニメーションとして]および[永遠にループ]チェックボックスをオンにします。これが Spektreの答え のようにファイルを更新するかどうかはわかりませんが、テストイメージはFireFox 60.0b8（64ビット）で正しくループしました、Chromeバージョン65.0 .3325.181（公式ビルド）（64ビット）、およびSafariバージョン9.1.1（11601.6.17）。 gimp loop forever

0
origamifreak2