Czy Jquery wie, kiedy skończy się mój animowany gif?

Question

Zastanawiam się, czy możliwe jest stworzenie animowanej gry GIF, a następnie wywołanie zdarzenia poprzez jquery, gdy gif dotrze do końca animacji. Po wykonaniu tej czynności pętle powracają do początku kolejki i ponownie odtwarzają gif, a następnie zdarzenie.

Jeśli spojrzysz na moje jfiddle, zrobiłem mały gif pisanie przez faceta. a kiedy spojrzy w górę i dostanie pomysł, chcę, żeby ten "myśl" div zmienił się w coś innego. Chciałem, aby to słowo nad jego głową było zsynchronizowane i zmieniało się, gdy wyskoczy mu głowa.

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

Moja odpowiedź na to pytanie jest podobna do this answer i this one na podobne pytanie stackoverflow.

Jeśli masz GIF z określoną liczbą klatek i bez pętli, możesz użyć javascript do użycia setTimeout, aby aktywować wydarzenie. Z tym jednak wiąże się bardzo duża szansa na zsynchronizowanie po prostu dlatego, że grasz w grę zgadującą, czy renderowanie GIF będzie odtwarzane z tą samą szybkością, co wykonywanie javascript za każdym razem.

Bezpieczniejszą opcją jest to, co druga odpowiedź, którą podłączyłem, mówi, że używasz sprite map do symulacji animacji. Osiąga się to za pomocą javascript, aby zmienić położenie tła obrazu w elemencie. W ten sposób masz większą kontrolę nad animacją animacji, większą kontrolę nad zdarzeniami javascript i lepsze wyczucie czasu, ponieważ jest ona związana z prędkością wykonywania javascript/będzie tylko w klatce animacji, którą mówisz.

Nie mam przykładu, ale z chęcią pomogę, jeśli uzyskasz przyzwoitą opinię lub masz inne pytania.

Useful information regarding CSS Sprites