Stopping Gif Animation Programmatically

Stopping GIF Animation Programmatically

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);
    }
}

How to stop and restart an animated gif

the another sites create two files for this.

thumbnail as JPG files for showing on default

and Gif file
when you click on JPG files GIF file replace with that and start to download and showing when you click again on GIF file you see JPG thumbnail.

this is a trick for showing you and you think yourself this is stop and playing system.

How to stop an animated gif from looping

Not sure if this is the best way to respond to everyone and have it appear after all the previous answers and comments, but it seems to work.

I don't have much control over the gif. People post whatever gif they want as the "thankyou.gif in their account directory and then the ThankYou code runs whatever they've put there when a comment is submitted to a form they've posted. So some may loop, some may not, some may be short, some may be long. The solution I've come to is to tell people to make them 5 seconds, because that's when I'm going to fade them out, and I don't care if they loop or not.

Thanks for all the ideas.

Stop a gif animation onload

By default you are not able to control gif animation looping.
In such situation, may be the easiest way is to have 2 images : one should be animated and another should be simple image.
You should place both of them inside of container and display animated only on hover. Something like that:

<div class="img-container" ng-repeat="sign in signs.List">
   <img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" />
   <img class="simple" ng-src="{{sign.simple_src}}" width="200" height="150" />
</div>

In you css then you place this code:

.animated {
    display:none
 } /* by default animated pic is hidden */
.img-container:hover .animated {
    display:block;
}
.img-container:hover .simple {
    display: none;
} /* hide simple image and display animated on mouseover */

If you don't have not animated version of an image and can't provide it for some reason: you can make it programmatically in browser using canvas. Here is nice explanation of how to do that.

Stopping an animated gif within 5 seconds

You are running this line at start:

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

And it freezing all of your images.

The problem with jsfiddle is that all the javascript code there is already inside window.load so you can't really use it twice, but here is the same inside snippet:

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");   } catch(e) {     for (var j = 0, a; a = i.attributes[j]; j++)      c.setAttribute(a.name, a.value);    i.parentNode.replaceChild(c, i);  }}
window.onload = function() {  setTimeout(function() {    [].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);  }, 5000);}

<img src="http://rubentd.com/img/banana.gif" alt="" >

document.onstop = function() {
     (document.getElementById("progress_img")).style.visibility = "hidden";
}