Jquery può sapere quando è finita la mia gif animata?

Question

Mi chiedo se è possibile avere una gif animata, quindi lanciare un evento attraverso jquery una volta che la gif ha raggiunto la fine della sua animazione. Una volta eseguita questa operazione, torna all'inizio della coda e riproduce nuovamente la gif, quindi l'evento.

Se date un'occhiata al mio jfiddle, ho fatto un piccolo gif di un ragazzo che digita. e poi quando alza lo sguardo e ottiene un'idea, voglio che div "pensato" di cambiare a qualcos'altro. Voglio praticamente che quella parola sopra la sua testa sia sincronizzata e cambi proprio quando la sua testa si apre.

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

La mia risposta a questo è simile a this answer e this one su una questione StackOverflow simile.

Se si dispone di una GIF con un determinato numero di frame e senza loop, è possibile utilizzare javascript setTimeout per attivare l'evento. Con questo però, ha una probabilità molto alta di andare fuori sincrono semplicemente perché stai giocando a un gioco di ipotesi se il rendering della GIF si svolgerà alla stessa velocità dell'esecuzione di javascript ogni volta.

Un'opzione più sicura è l'altra risposta che ho detto nel modo in cui si utilizza uno sprite map per simulare un'animazione. Questo si ottiene usando javascript per cambiare la posizione dello sfondo dell'immagine nell'elemento. In questo modo, hai molto più controllo sul modo in cui l'animazione si anima, maggiore controllo sugli eventi javascript e tempistica migliore in quanto legata alla velocità di esecuzione di javascript/sarà solo alla cornice dell'animazione a cui gli si dice di essere.

Non ho un esempio, tuttavia sono felice di aiutarti se riesci a ottenere un buon esempio su questo o hai altre domande.

Useful information regarding CSS Sprites