Starten Sie ein animiertes GIF von JavaScript, ohne das Bild neu zu laden

Question

Ich erstelle eine Slideshow von Animationen mit animierten GIFs. Ich überblinde von einer Animation zur nächsten. Das Problem ist: Die einzige Möglichkeit, die GIF-Animation vom ersten Frame an zu animieren, besteht darin, sie jedes Mal neu zu laden, wenn sie angezeigt wird. Die GIFs sind jeweils 200 KB oder mehr, was viel zu viel Bandbreite für eine kontinuierliche Diashow ist.

Hier ist mein aktueller Code. img und nextimg sind <div> Tags, die jeweils ein einzelnes enthalten. nextimg_img ist der Tag , der dem nächsten Bild entspricht, das angezeigt werden soll.

var tmp = nextimg_img.attr('src'); 
nextimg_img.attr('src', ''); 
setTimeout(function() { nextimg_img.attr('src', tmp); }, 0); 
img.fadeOut('slow'); 
nextimg.fadeIn('slow'); 

Die Idee ist, dass es das src Attribut des nächsten Bildes auf '' setzt, setzt sie dann zurück an die Quelle des GIF angezeigt werden.

Dies funktioniert — Es startet die Animation von Anfang an —, aber die GIFs scheinen jedes Mal neu heruntergeladen werden, wenn sie angezeigt werden.

EDIT: Es ist eine Looping-Diashow, und ich versuche zu vermeiden, die GIFs aus dem Netz neu zu laden, wenn sie das zweite/dritte/nachfolgende Mal gezeigt werden.

Answer 1

Sie sollten Ihre Bilder in Code vorab laden.

var image = new Image(); 
image.src = "path"; 

, wenn Sie verwenden möchten:

nextimg_img.attr('src', image.src); 

Dann, wenn Sie die src auslagern tauschen nur aus den vorinstallierten Bildobjekten. Das sollte den Trick machen, um Redownloading zu vermeiden.

Answer 2

// reset a gif in javascript 
img.src = "your_image_url.gif"+"?a="+Math.random(); 

Tada!

Bitte beachten Sie, das GIF wird jedes Mal heruntergeladen werden, so halten Sie es eine kleine Datei.

Answer 3

Ich habe es gerade gelöst. Platzieren Sie diesen Code (oder ein anderes statisches Bild, wenn Sie mögen) auf der Seite zuerst:

<img src="data:image/gif;base64,"> 

Dann ersetzen Sie es mit dem folgenden Code, wenn Sie bereit sind, es zu spielen:

<img src="data:image/gif;base64,R0lGODl...AH0AvI"> 

Es spielen wird aus der Anfang des Gifs.

Das einzige Problem ist, dass Sie nicht die URL des GIF, sondern nur seine Base64 verwenden können.