Stopping GIF Animation Programmatically

Question

I am developing a Twitter application which references to the images directly from Twitter. How can I prevent animated gifs from being played?

Using window.stop() at the end of the page does not work for me in Firefox.

Is there a better JavaScript hack? Preferable this should work for all browsers

Answer 1

Inspired by the answer of @Karussell I wrote Gifffer. Check it out here https://github.com/krasimir/gifffer

It automatically adds stop/play control on top of your Gif.

Answer 2

This is not a cross browser solution but this worked in firefox and opera (not in ie8 :-/). Taken 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);     } }