Come fermare una gif animata da loop

Ho una gif animata in un tag img che ricomincio riscrivendo l’attributo src. La gif è stata creata, però, in loop e io voglio solo che venga riprodotta una volta. C’è un modo, con Javascript o jQuery, per fermare una gif animata da giocare più di una volta?

puoi scoprire per quanto tempo il gif prende il ciclo una volta? se è così allora puoi fermare l’immagine in questo modo:

pseudocodice:

 wait until the end of the image (when it is about to loop) create a canvas element that has a static version of the gif as currently displayed drawn on it hide gif display canvas element in a way that makes it look like the gif froze 

javascript:

 var c = $("canvas")[0]; var w = c.width; var h = c.height; var img = $("img")[0]; setTimeout(function () { c.getContext('2d').drawImage(img, 0, 0, w, h); $(img).hide(); $(c).show(); },10000); 

jsfiddle

modifica: ho dimenticato di aggiungere il riferimento alla risposta originale da cui ho preso questo, mi dispiace

Fermare l’animazione GIF a livello di programmazione

quello non affronta il fattore tempo necessario per un solo ciclo

Inoltre, è stato detto che questo approccio è problamatico in alcuni casi (in realtà non ha funzionato quando lo provo in Firefox in questo momento …). quindi ecco alcune alternative:

  1. menzionato da Mark: modifica la gif stessa per evitare il loop. questa è l’opzione migliore se puoi. ma ho riscontrato casi in cui non era un’opzione (come la generazione automatica di immagini da parte di terzi)

  2. invece di rendere l’immagine statica con canvas, mantenere una versione dell’immagine statica e passare a interrompere il ciclo . questo probabilmente ha la maggior parte dei problemi come la cosa della canvas

Sulla base di questa risposta , è piuttosto costoso, ma funziona. Diciamo che un singolo ciclo richiede 2 secondi. Ad un setTimeout dopo 2 secondi di kick in un setInterval, ciò ripristinerebbe la sorgente di immagini ogni millisecondo:

 setTimeout(function() { setInterval(function() { $('#img1').attr('src',$('#img1').attr('src')) },1) }, 2000) 

di nuovo, probabilmente solo una dimostrazione del concetto, ma ecco la demo: http://jsfiddle.net/MEaWP/2/

Non sono sicuro se questo è il modo migliore per rispondere a tutti e farlo apparire dopo tutte le risposte e i commenti precedenti, ma sembra funzionare.

Non ho molto controllo sulla gif. Le persone postano qualsiasi gif che vogliono come “thankyou.gif nella loro directory account e quindi il codice ThankYou esegue qualsiasi cosa abbiano messo lì quando un commento viene inviato a un modulo che hanno pubblicato. Quindi alcuni potrebbero loop, alcuni no, alcuni potrebbero essere brevi, alcuni potrebbero essere lunghi. La soluzione a cui sono giunto è di dire alla gente di renderli 5 secondi, perché è in quel momento che li svanirà, e non mi interessa se si collegano o no .

Grazie per tutte le idee.

In realtà è ansible fare in modo che una gif si fermi dopo una sola iterazione o un numero specifico di iterazioni, vedi un esempio qui sotto (se non è già stato fermato), o in jsfiddle .

gif con fermate dopo due iterazioni

Per fare ciò il gif deve essere creato con il numero di iterazioni specificato. Questo può essere fatto usando Screen to Gif , permette di aprire una gif o un gruppo di immagini e modificarle fotogramma per fotogramma.

Questa soluzione consente inoltre di reimpostare l’animazione da imgElem.src = imgElem.src; ma questo non funziona in MS IE / Edge.

So che sono in ritardo qui ma … c’è …

Non so se andresti a questa lunghezza ma lasciatemi condividere un trucco.

Apri GIF in Macromedia Flash 8 (che da allora è deprecato), Esporta GIF come GIF animata. Dovrai scegliere il percorso del file. Successivamente, si riceverà una finestra di dialogo con le impostazioni. In questo, aggiungi il numero di volte in cui desideri che l’animazione si verifichi. Clicca OK. Problema risolto.