Gif animato solo cicli una volta in Chrome e Firefox

Question

Ho una gif animata che voglio visualizzare ogni volta che una pagina si sta caricando. Quando visualizzo l'immagine all'esterno di un browser, l'immagine scorre infinitamente e funziona perfettamente, ma ogni volta che visualizzo l'immagine in un browser, l'animazione si sposta solo una volta. Qualcuno ha qualche suggerimento per rendere l'immagine loop infinitamente?

Attualmente mi sto solo facendo questo per fare apparire l'immagine che fa far apparire, ma solo una volta loop:

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

Answer 1

È possibile sia stato un numero finito di cicli, oppure si può fare il film loop per sempre. INFINITE (o -1) scorre il film più e più volte finché la pagina è sullo schermo. Ad esempio, questo codice produce un film, che è continuamente in loop:

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

Source

Answer 2

stavo affrontando lo stesso problema con il mio GIF encoder classe/decoder che ho scritto qualche tempo fa (e migliorando con il tempo di tempo). Ho scoperto la soluzione per questo solo ieri. Il GIF è completamente soddisfacente, il problema è nella parte del browser internet moderno. I browser infetti sono Opera, IE, Chrome (non ha testato altri).

Dopo alcune indagini in materia (confrontando looping e le immagini non looping) ho scoperto che questi browser GIF decoder stanno ignorando i parametri di loop in GIF file. Al contrario, dipendono dall'estensione dell'applicazione non documentata nel primo fotogramma del file GIF.

Quindi la soluzione è aggiungere questo comando di estensione appena prima dei primi dati di immagine del frame. Aggiungi questo chunk:

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

Ciò costringerà i browser a scorrere all'infinito.

Qui esempio:

vista Hex in modo da vedere come si è aggiunto:

Il GIF non è sensibile sull'inserimento/riordino pezzi non immagine di dati in modo da poter inserire questo prima della prima immagine su qualsiasi posto tra qualsiasi altra estensione. L'ho messo direttamente dopo l'intestazione + palette. Che può essere fatto con C++ o qualsiasi altra lingua. (non è necessaria la re-encoding). Per maggiori informazioni visita:

• How to find where does Image Block start in GIF images?
• Decode data bytes of GIF87a raster data stream

---

[Edit da Reed Dunkle]

È anche possibile farlo manualmente con un editor esadecimale. Ho usato "Hex Fiend" su macOS Sierra.

Cerca 21 F9 nelle parti iniziali di hex (questa è l'intestazione). Nella foto sopra, è 21 F9 04 04 00 00 00 00. La tua potrebbe essere leggermente diversa, ma nota che arriva prima dello 2C, che segna l'inizio di un blocco immagine.

Prima della 21 F9 ... porzione, inserto seguente esagonale, contrassegnato come "estensione applicazione" nella foto qui sopra:

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

Salva, e testarlo.

Addon da Spektre: Attenzione 21 F9 marchi GFX pezzo estensione che è opzionale in modo che non può essere presente per tutti o qualsiasi frame (ma che in realtà è raro in questi giorni)

Answer 3

Ha scritto in PHP gif fixer in base alla risposta da 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); 

    } 

} 

Questo rende copia del image.gif come _image.gif con la stringa inserita necessaria dopo la tabella colori e stampe out nuovo URL src. (Verifica se l'immagine è già fissato prima.)

Usage:

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

o

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

responsabilità: nessuna responsabilità assunte e so che questo può essere ottimizzato :)

Answer 4

È possibile utilizzare per elaborare una GIF animata e aggiungere il ciclo corretto compatibile con tutti i browser:

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

così nel Terminal faccio:

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

che produce una nuova GIF animato che funziona in Chrome & Firefox e Safari.