Est-il possible de détecter des images gif animées côté client?

Question

Est-il possible de détecter les images gif animées côté client?

Dans Internet Explorer, vous pouvez utiliser l'événement onload pour cela, car il sera déclenché pour every frame loaded (comportement modifié dans IE8).

Mais y a-t-il un moyen pour les autres navigateurs?

Answer 1

Je ne connais aucun moyen de le faire du côté client, mais je ne suis pas sûr de cela. Ce que vous pouvez faire, c'est analyser le code HTML et tout gif référencé du côté serveur et ajouter une classe à ces images. Mais ce n'est pas vraiment recommandé car cela implique au moins une analyse supplémentaire de l'analyse HTML + de chaque gif. Comme vous pouvez le voir de this example in PHP, la vérification des gifs n'est pas non plus triviale en termes de charge CPU.

Answer 2

Je viens d'écrire quelques JS qui détectent les gifs animés. Fonctionne dans la plupart des navigateurs modernes, sauf IE 9.

Avertissement: cela ne fonctionne que si l'origine du domaine de l'image est la même que la page que vous chargez le script.

Voir l'essentiel de la dernière version du code: https://gist.github.com/3012623

function isAnimatedGif(src, cb) { 
    var request = new XMLHttpRequest(); 
    request.open('GET', src, true); 
    request.responseType = 'arraybuffer'; 
    request.addEventListener('load', function() { 
     var arr = new Uint8Array(request.response), 
      i, len, length = arr.length, frames = 0; 

     // make sure it's a gif (GIF8) 
     if (arr[0] !== 0x47 || arr[1] !== 0x49 || 
      arr[2] !== 0x46 || arr[3] !== 0x38) 
     { 
      cb(false); 
      return; 
     } 

     //ported from php http://www.php.net/manual/en/function.imagecreatefromgif.php#104473 
     //an animated gif contains multiple "frames", with each frame having a 
     //header made up of: 
     // * a static 4-byte sequence (\x00\x21\xF9\x04) 
     // * 4 variable bytes 
     // * a static 2-byte sequence (\x00\x2C) (some variants may use \x00\x21 ?) 
     // We read through the file til we reach the end of the file, or we've found 
     // at least 2 frame headers 
     for (i=0, len = length - 9; i < len, frames < 2; ++i) { 
      if (arr[i] === 0x00 && arr[i+1] === 0x21 && 
       arr[i+2] === 0xF9 && arr[i+3] === 0x04 && 
       arr[i+8] === 0x00 && 
       (arr[i+9] === 0x2C || arr[i+9] === 0x21)) 
      { 
       frames++; 
      } 
     } 

     // if frame count > 1, it's animated 
     cb(frames > 1); 
    }); 
    request.send(); 
}