Kann Jquery wissen, wann mein animiertes GIF beendet ist?

Question

Ich frage mich, ob es möglich ist, ein animiertes GIF-Spiel zu haben, dann feuere ich ein Ereignis durch jQuery ab, sobald das GIF das Ende seiner Animation erreicht hat. Sobald dies der Fall ist, springt es zum Anfang der Warteschlange zurück und spielt das Ereignis gif then erneut ab.

Wenn Sie sich meine jfiddle ansehen, machte ich ein kleines gif von einem Typ tippen. Und wenn er dann aufblickt und eine Idee bekommt, möchte ich, dass sich das "Gedanken" -Div in etwas anderes verwandelt. Ich möchte, dass das Wort über seinem Kopf synchron ist und sich ändert, wenn sein Kopf auftaucht.

http://jsfiddle.net/mMVhK/1/

<div id="thought"> 
    Amazing Idea 
</div> 

<div id="firstgif"> 
    <img src="http://i.imgur.com/pcc4DP5.gif"/> 
</div> 

Answer 1

Meine Antwort ist ähnlich wie this answer und this one auf einem ähnlichen Stackoverflow Frage.

Wenn Sie eine GIF mit einer festgelegten Anzahl von Frames und ohne Schleife haben, können Sie Javascript verwenden setTimeout, um Ihr Ereignis auszulösen. Mit diesem jedoch hat es eine sehr hohe Chance, aus der Synchronisation zu geraten, nur weil Sie ein Ratespiel spielen, ob das Rendering des GIF jedes Mal mit der gleichen Geschwindigkeit wie die Ausführung des Javascript ausgeführt wird.

Eine sicherere Option ist, was die andere Antwort, die ich verknüpfte, in der Weise, dass Sie eine sprite map verwenden, um eine Animation zu simulieren. Dies wird erreicht, indem Javascript verwendet, um die Hintergrundposition des Bildes im Element zu ändern. Auf diese Weise haben Sie viel mehr Kontrolle darüber, wie die Animation animiert, größere Kontrolle über Javascript-Ereignisse und ein besseres Timing, da es an die Ausführungsgeschwindigkeit von Javascript gebunden ist/es wird nur im Rahmen der Animation sein, zu der es gehört.

Ich habe kein Beispiel, aber ich bin glücklich zu helfen, wenn Sie einen anständigen Vorsprung haben oder andere Fragen haben.

Useful information regarding CSS Sprites