web-dev-qa-db-de.com

Animierte GIF-Loops nur einmal in Chrome und Firefox

Ich habe ein animiertes GIF, das ich anzeigen möchte, wenn eine Seite geladen wird. Wenn ich das Bild außerhalb eines Browsers sehe, wird das Bild endlos geschlungen und funktioniert einwandfrei. Wenn ich das Bild jedoch in einem Browser darstelle, wird die Animation nur einmal wiederholt. Hat jemand irgendwelche Vorschläge, um die Bildschleife unendlich zu machen?

Im Moment mache ich das nur, um das Bild erscheinen zu lassen, das es erscheinen lässt, aber nur einmal in einer Schleife:

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

Ich hatte das gleiche Problem mit meiner GIF Encoder/Decoder-Klasse, die ich vor einiger Zeit geschrieben habe (und mit der Zeit von Zeit zu Zeit besser wurde). Ich habe erst gestern die Lösung dafür gefunden. Das GIF ist vollkommen in Ordnung, das Problem liegt bei modernen Internet-Browsern. Infizierte Browser sind Opera, IE, Chrome (andere nicht getestet).

Nach einiger Untersuchung der Sache (durch Vergleich von Schleifenbildern und Bildern ohne Schleifen) habe ich herausgefunden, dass diese Browser GIF - Decoder die Schleifenparameter in der Datei GIF ignorieren. Sie sind stattdessen von der undokumentierten Anwendungserweiterung im ersten Frame der Datei GIF abhängig.

Die Lösung besteht also darin, diesen Erweiterungsbefehl kurz vor den ersten Bilddaten hinzuzufügen. Fügen Sie dieses Stück hinzu:

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

Dadurch werden Browser gezwungen, endlos eine Schleife zu erstellen.

Hier ein Beispiel:

 looping

Hex-Ansicht, damit Sie sehen, wie es hinzugefügt wird:

 hex

Das GIF ist beim Einfügen/Umordnen von Nicht-Image-Datenblöcken nicht empfindlich. Sie können dieses also vor dem ersten Image an einer beliebigen Stelle zwischen einer beliebigen anderen Erweiterung einfügen. Ich habe es direkt nach Header + Palette gesetzt. Was kann mit C++ oder einer anderen Sprache gemacht werden. (Es ist keine Neucodierung erforderlich). Für weitere Informationen siehe:


[Edit by Reed Dunkle]

Sie können dies auch manuell mit einem Hex-Editor tun. Ich habe "Hex Fiend" für macOS Sierra verwendet.

Suchen Sie nach 21 F9 in den Anfangsbereichen von hex (dies ist die Kopfzeile). Im obigen Foto ist es 21 F9 04 04 00 00 00 00. Ihr könnte etwas anders sein, aber es kommt vor 2C, der den Beginn eines Bildblocks markiert.

Vor dem 21 F9... -Abschnitt ist das folgende Hex, das als "Anwendungserweiterung" im obigen Foto markiert ist::

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

Speichern Sie und testen Sie es.

Addon von Spektre: Achtung 21 F9 markiert gfx extension chunk, was optional ist. Es kann nicht für alle oder beliebige Frames vorhanden sein (aber das ist heutzutage wirklich selten).

19
Spektre

Sie können das Befehlszeilentool gifsicle verwenden, um ein animiertes GIF zu verarbeiten und die richtige Schleife hinzuzufügen, die mit allen Browsern kompatibel ist:

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

also im Terminal mache ich:

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

Dadurch entsteht ein neues Animated GIF, das sowohl in Chrome & Firefox als auch in Safari funktioniert. 

16
Matt Sephton

Sie können entweder eine begrenzte Anzahl von Schleifen angeben oder den Film für immer durchlaufen lassen. INFINITE (oder -1) wiederholt den Film so lange, wie die Seite auf dem Bildschirm angezeigt wird. Dieser Code erzeugt beispielsweise einen Film, der fortlaufend in einer Schleife abgespielt wird:

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

Quelle

2
minimal

Schrieb den PHP Gif Fixer basierend auf der Antwort von Spektre:

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

    }

}

Dadurch wird eine Kopie von image.gif als _image.gif erstellt, wobei die erforderliche Zeichenfolge nach der Farben-Tabelle eingefügt wird und die neue URL-Adresse ausgegeben wird. (Überprüft, ob das Bild zuerst behoben wurde.)

Verwendungszweck:

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

oder

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

Haftungsausschluss: keine Verantwortung übernommen und ich weiß, dass dies optimiert werden kann :)

1
Rauli Rajande

Mit ImageMagick oft vorinstalliert:

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

Es scheint, dass Gimp es Ihnen erlaubt, ein Gif zu exportieren, das sich in einer Schleife befindet. Öffnen Sie einfach das GIF, dann "Datei"> "Exportieren als" und aktivieren Sie die Kontrollkästchen "Als Animation" und "Loop Forever". Ich weiß nicht, ob dies die Datei wie in Spektres Antwort aktualisiert, aber mein Testbild wurde in FireFox 60.0b8 (64-Bit), Chrome Version 65.0.3325.181 (Offizieller Build) (64-Bit) richtig angezeigt. und Safari Version 9.1.1 (11601.6.17).  gimp loop forever

0
origamifreak2