¿Es posible detectar imágenes gif animadas del lado del cliente?

Question

¿Es posible detectar imágenes gif animadas del lado del cliente?

En Internet Explorer puede usar el evento onload para esto, ya que se disparará para every frame loaded (comportamiento cambiado en IE8).

¿Pero hay alguna manera de que otros navegadores también lo hagan?

Answer 1

No conozco ninguna forma de hacerlo en el lado del cliente, pero no estoy seguro de eso. Lo que podría hacer es analizar el código HTML y cualquier gif referenciado en el lado del servidor y agregar una clase a estas imágenes. Pero eso no se recomienda porque implica al menos un análisis adicional de HTML + de cada gif. Como puede ver en this example in PHP, comprobar los archivos .gif tampoco es trivial en términos de carga de la CPU.

Answer 2

Acabo de escribir algunos JS que detectan gifs animados. Funciona en la mayoría de los navegadores modernos excepto IE 9.

responsabilidad: esto sólo funciona si el origen del dominio de la imagen es la misma que la página que va a cargar el script desde.

Ver el quid de la última versión del código: 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(); 
}