javascript - puedo - Un gif animado solo se reproduce una vez en Chrome y Firefox

pausar gif animado

Question

Tengo un gif animado que quiero mostrar cada vez que se carga una página. Cuando veo la imagen fuera de un navegador, la imagen se repite infinitamente y funciona bien, pero siempre que muestro la imagen en un navegador, la animación solo se repite una vez. ¿Alguien tiene alguna sugerencia para hacer el bucle de imagen infinitamente?

Actualmente solo estoy haciendo esto para hacer que aparezca la imagen, pero solo se repite una vez:

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

Answer 1

Con ImageMagick, a menudo preinstalado:

convert -loop 0 bad.gif good.gif

Answer 2

Escribió PHP GIF Fixer basado en la respuesta 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);

    }

}

Esto hace que se copie la imagen.gif como _image.gif con la cadena necesaria insertada después de la tabla de colores e imprime la nueva URL src. (Comprueba si la imagen ya está arreglada primero.)

Uso:

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

o

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

Descargo de responsabilidad: no se asumen responsabilidades y sé que esto se puede optimizar :)

Answer 3

Estaba enfrentando el mismo problema con mi codificador / decodificador GIF que escribí hace algún tiempo (y mejoré con el tiempo). Ayer encontré la solución para esto. El GIF está completamente bien, el problema está en el lado del navegador de Internet moderno. Los navegadores infectados son Opera, IE, Chrome (no probaron otros).

Después de una investigación al respecto (comparando imágenes en bucle y no en bucle) descubrí que estos decodificadores GIF de los navegadores ignoran los parámetros del bucle en el archivo GIF . En su lugar, dependen de la extensión de la aplicación no documentada en el primer fotograma del archivo GIF .

Entonces, la solución es agregar este comando de extensión justo antes de los datos de la primera imagen de marco. Añadir este trozo:

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

Esto obligará a los navegadores a hacer un bucle sin fin.

Aquí el ejemplo:

Vista hexagonal para que veas cómo se añade:

El GIF no es sensible al insertar / reordenar fragmentos de datos que no son imágenes, por lo que puede insertar esto antes de la primera imagen en cualquier lugar entre cualquier otra extensión. Lo puse directamente después del encabezado + paleta. Lo que se puede hacer con C ++ o cualquier otro idioma. (No es necesario volver a codificar). Para más información ver:

• ¿Cómo encontrar dónde comienza Image Block en imágenes GIF?
• Decodificar bytes de datos del flujo de datos ráster GIF87a

[Editar por Reed Dunkle]

También puedes hacerlo manualmente con un Editor Hex. Utilicé "Hex Fiend" en macOS Sierra.

Busca 21 F9 en las partes iniciales de hex (este es el encabezado). En la foto de arriba, es 21 F9 04 04 00 00 00 00 . El suyo podría ser ligeramente diferente, pero observe que viene antes de 2C , lo que marca el comienzo de un bloque de imagen.

Antes de la porción 21 F9 ..., inserte el siguiente hexágono, marcado como "extensión de aplicación" en la foto de arriba:

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

Guarda, y prueba.

Addon by Spektre: Cuidado 21 F9 marca el fragmento de extensión gfx, que es opcional, por lo que puede no estar presente para todos o cualquier fotograma (pero eso es realmente raro en estos días)

Answer 4

Parece que Gimp te permitirá exportar un gif que se enmarcará correctamente. Simplemente abre el gif, luego ''Archivo''> ''Exportar como'' y marca las casillas de verificación "Como animación" y "Repetir siempre". No sé si esto actualiza el archivo como en la respuesta de Spektre , pero mi imagen de prueba se repitió correctamente en FireFox 60.0b8 (64 bits), Chrome versión 65.0.3325.181 (compilación oficial) (64 bits) y Safari versión 9.1 .1 (11601.6.17).

Answer 5

Puede establecer un número finito de bucles o puede hacer el bucle de la película para siempre. INFINITE (o -1) repite la película una y otra vez siempre que la página esté en la pantalla. Por ejemplo, este código produce una película que se repite continuamente:

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

Source

Answer 6

Puede usar la herramienta de línea de comandos gifsicle para procesar un gif animado y agregar el bucle correcto que sea compatible con todos los navegadores:

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

así que en la Terminal hago:

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

Lo que produce un nuevo GIF animado que funciona en Chrome & Firefox, así como en Safari.