Stop a gif animation onload

Question

I have a page with a lot of GIFs.

<div ng-repeat="sign in signs.List">
<img  ng-src="{{sign.src}}" width="200" height="150" />
</div>

What I'm looking for

1 On page load => Animations for all gifs are stopped

2 On mouseover => Animations starts for that one gif

3 On mouseout => Animation stops again for that gif

I suppose this can be done in AngularJs but I don't know how.

Artem Arkhipov · Accepted Answer · 2017-06-28T20:04:09.860

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.

Stop a gif animation onload

1 Answers1