Stoppen Sie eine GIF-Animation onload

Question

Ich habe eine Seite mit vielen GIFs.

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

Was ich suche

1 auf Seite load => Animationen für alle Gifs

2 mit der Maus darüber gestoppt werden => Animationen beginnt für diese eine gif

3 auf mouseout => Animation stoppt wieder für das gif

Ich nehme an, dass dies in AngularJs getan werden kann, aber ich weiß nicht wie.

Answer 1

Standardmäßig können Sie die GIF-Animationsschleife nicht steuern. In einer solchen Situation ist der einfachste Weg, 2 Bilder zu haben: Man sollte animiert sein und ein anderes Bild sollte einfach sein. Sie sollten beide im Container platzieren und nur beim Schweben animiert anzeigen. So etwas Ähnliches:

<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 Ihrem css dann platzieren Sie diesen 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 */ 

Wenn Sie nicht nicht Version eines Bildes animiert und kann es aus irgendeinem Grund nicht zur Verfügung stellen: Sie kann es programmatisch im Browser mit Canvas machen. Hier ist nice explanation wie das geht.