javascript - w3school - jquery v3 3.1 cdn




Come fermare una gif animata dal loop (4)

In realtà è possibile far smettere una gif dopo una sola iterazione o un numero specifico di iterazioni, vedere un esempio qui sotto (se non è già stato fermato), o in jsfiddle .

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.

Ho una gif animata in un tag img che ricomincio riscrivendo l'attributo src. La gif è stata creata, però, in loop e 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?


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 desiderano 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 potrebbero non, alcuni potrebbero essere brevi, alcuni potrebbero essere lunghi. La soluzione a cui sono giunto è di dire alla gente di renderli 5 secondi, perché è lì che li sbiadisco, e non mi interessa se si collegano o no .

Grazie per tutte le idee.


Stavo avendo lo stesso problema con una gif animata. La soluzione è piuttosto semplice.

  1. Apri la gif animata in Photoshop.

  2. Vai alla scheda Finestra e seleziona la sequenza temporale (se la timeline non è già aperta).

  3. Nella parte inferiore del pannello Timeline, troverai un'opzione, che dice "Forever". Cambia quello in "Once".

  4. Vai su File> Esporta> Esporta per Web e salvalo come GIF.

Questo dovrebbe farlo.


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 di concetto, ma ecco la demo: http://jsfiddle.net/MEaWP/2/





jquery