javascript - stop - pausar gif html

¿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 activará para cada fotograma cargado (comportamiento cambiado en IE8).

Pero, ¿hay una manera para otros navegadores también?

Answer 1

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

Descargo de responsabilidad: esto solo funciona si el origen del dominio de la imagen es el mismo que la página desde la que está cargando el script.

Vea el resumen para 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();
}

Answer 2

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 realmente porque implica al menos un análisis adicional de HTML + análisis de cada gif. Como puede ver en este ejemplo en PHP , verificar los gifs tampoco es trivial en términos de carga de CPU.