Detener la animación GIF programáticamente

Question

Estoy desarrollando una aplicación de Twitter que hace referencia a las imágenes directamente desde Twitter. ¿Cómo puedo evitar que se reproduzcan los gif animados?

El uso de window.stop() al final de la página no funciona para mí en Firefox.

¿Hay un mejor hack de JavaScript? Preferible, esto debería funcionar para todos los navegadores

Answer 1

Esto no es una solución de navegador cruzado, pero esto funcionó en firefox y opera (no en ie8: - /). Tomado from here

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif); 

function is_gif_image(i) { 
    return /^(?!data:).*\.gif/i.test(i.src); 
} 

function freeze_gif(i) { 
    var c = document.createElement('canvas'); 
    var w = c.width = i.width; 
    var h = c.height = i.height; 
    c.getContext('2d').drawImage(i, 0, 0, w, h); 
    try { 
     i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects 
    } catch(e) { // cross-domain -- mimic original with all its tag attributes 
     for (var j = 0, a; a = i.attributes[j]; j++) 
      c.setAttribute(a.name, a.value); 
     i.parentNode.replaceChild(c, i); 
    } 
} 

Answer 2

Esto es un truco, pero podrías intentar cargar el gif en un iframe y llamar al window.stop() desde dentro del iframe (sobre sí mismo) una vez que la imagen se haya cargado. Esto evita que el resto de la página se detenga.

Answer 3

Inspirado por la respuesta de @Karussell escribí Gifffer. Compruébelo aquí https://github.com/krasimir/gifffer

Agrega automáticamente el control de parada/reproducción en la parte superior de su Gif.

Answer 4

En un intento de mejorar la respuesta de Karussell, esta versión debe ser de navegador cruzado, congela todas las imágenes, incluidas las que tienen una finalización incorrecta (por ejemplo, páginas de carga de imágenes automáticas) y no entra en conflicto con la función del original imagen, lo que permite que el original se haga clic derecho como si se estuviera moviendo.

Lo haría detectar la animación, pero eso es mucho más intenso que simplemente congelarlos independientemente.

function createElement(type, callback) { 
    var element = document.createElement(type); 

    callback(element); 

    return element; 
} 

function freezeGif(img) { 
    var width = img.width, 
    height = img.height, 
    canvas = createElement('canvas', function(clone) { 
     clone.width = width; 
     clone.height = height; 
    }), 
    attr, 
    i = 0; 

    var freeze = function() { 
     canvas.getContext('2d').drawImage(img, 0, 0, width, height); 

     for (i = 0; i < img.attributes.length; i++) { 
      attr = img.attributes[i]; 

      if (attr.name !== '"') { // test for invalid attributes 
       canvas.setAttribute(attr.name, attr.value); 
      } 
     } 

     canvas.style.position = 'absolute'; 

     img.parentNode.insertBefore(canvas, img); 
     img.style.opacity = 0; 
    }; 

    if (img.complete) { 
     freeze(); 
    } else { 
     img.addEventListener('load', freeze, true); 
    } 
} 

function freezeAllGifs() { 
    return new Array().slice.apply(document.images).map(freezeGif); 
} 

freezeAllGifs();