web-dev-qa-db-fra.com

Gif animé boucle seulement une fois dans Chrome et Firefox

J'ai un gif animé que je veux afficher chaque fois qu'une page se charge. Lorsque je visualise l'image en dehors d'un navigateur, l'image est bouclée indéfiniment et fonctionne parfaitement, mais chaque fois que j'affiche l'image dans un navigateur, l'animation ne boucle qu'une fois. Quelqu'un a-t-il des suggestions pour que l'image se boucle en boucle à l'infini?

Actuellement, je fais juste cela pour faire apparaître l'image, ce qui la fait apparaître, mais seulement en boucle une fois:

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

Je rencontrais le même problème avec ma classe de codeur/décodeur GIF que j'avais écrite il y a quelque temps (et qui s'améliorait avec le temps). J'ai trouvé la solution pour cela hier. Le GIF est tout à fait correct, le problème est du côté du navigateur Internet moderne. Les navigateurs infectés sont Opera, IE, Chrome (n’a pas testé les autres).

Après quelques recherches sur le sujet (en comparant des images en boucle et non en boucle), j'ai découvert que ces décodeurs GIF des navigateurs ignoraient les paramètres de boucle dans le fichier GIF. Au lieu de cela, ils dépendent de l'extension d'application non documentée dans la première image du fichier GIF.

La solution consiste donc à ajouter cette commande d'extension juste avant les premières données d'image. Ajouter ce morceau:

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

Cela forcera les navigateurs à faire une boucle infinie.

Voici des exemples:

 looping

Vue Hex pour que vous voyiez comment elle est ajoutée:

 hex

Le GIF n'est pas sensible à l'insertion/la réorganisation de blocs de données autres que des images, vous pouvez donc l'insérer avant la première image à n'importe quel endroit entre toute autre extension. Je le mets directement après en-tête + palette. Ce qui peut être fait avec C++ ou tout autre langage. (aucun recodage n'est nécessaire). Pour plus d'informations, voir:

[Edité par Reed Dunkle]

Vous pouvez également le faire manuellement avec un éditeur hexadécimal. J'ai utilisé "Hex Fiend" sur macOS Sierra.

Recherchez 21 F9 dans les parties de début de hex (c'est l'en-tête). Dans la photo ci-dessus, il s'agit de 21 F9 04 04 00 00 00 00. Le vôtre peut être légèrement différent, mais notez qu'il vient avant le 2C, qui marque le début d'un bloc d'image.

Avant la partie 21 F9..., insérez l'hexagone suivant, désigné comme "extension de l'application" sur la photo ci-dessus:

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

Enregistrez et testez-le.

Addon par Spektre: Méfiez-vous 21 F9 marque le bloc d’extension gfx qui est facultatif, ainsi il peut ne pas être présent pour toutes les images (mais c’est très rare de nos jours)

19
Spektre

Vous pouvez utiliser l'outil de ligne de commande gifsicle pour traiter un gif animé et ajouter le bouclage correct compatible avec tous les navigateurs:

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

donc dans le terminal je fais:

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

Qui produit un nouveau GIF animé qui fonctionne dans Chrome & Firefox ainsi que Safari. 

16
Matt Sephton

Vous pouvez définir un nombre fini de boucles ou faire en sorte que le film reste en boucle pour toujours. INFINITE (ou -1) boucle le film encore et encore tant que la page est à l'écran. Par exemple, ce code produit un film qui boucle en boucle:

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

La source

2
minimal

PHP a écrit le fixateur basé sur la réponse de 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);

    }

}

Cela crée une copie du fichier image.gif en tant que _image.gif avec la chaîne nécessaire insérée après le tableau des couleurs et affiche la nouvelle adresse URL src. (Vérifie si l'image est déjà corrigée en premier.)

Usage:

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

ou

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

Déni de responsabilité: aucune responsabilité prise et je sais que cela peut être optimisé :)

1
Rauli Rajande

Avec ImageMagick, souvent pré-installé:

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

Il semble que Gimp vous permettra d’exporter un gif qui fonctionnera correctement. Ouvrez simplement le gif, puis cliquez sur "Fichier"> "Exporter sous" et cochez les cases "En tant qu'animation" et "En boucle pour toujours". Je ne sais pas si cela met à jour le fichier comme dans La réponse de Spektre , mais mon image de test a été bouclée correctement dans FireFox 60.0b8 (64 bits), version 65.0.3625.181 de Chrome (version officielle) (64 bits), et Safari version 9.1.1 (11601.6.17).  gimp loop forever

0
origamifreak2