Reiniciar un GIF animado desde JavaScript sin volver a cargar la imagen

Question

Estoy creando una presentación de diapositivas de animaciones con GIF animados. Estoy transfiriendo de una animación a la siguiente. El problema es que la única forma que he descubierto para garantizar que el GIF comience a animar desde el primer fotograma es recargarlo cada vez que se muestra. Los GIF son 200 KB más o menos, que es demasiado ancho de banda para una presentación continua.

Aquí está mi código actual. img y nextimg son <div> etiquetas que contienen un solo <img> cada uno. nextimg_img es la etiqueta <img> correspondiente a la siguiente imagen que se mostrará.

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

La idea es que se establece el atributo src de la siguiente imagen a '', a continuación, establece de nuevo a la fuente del GIF que se mostrará.

Esto funciona — reinicia la animación desde el principio — pero parece que los GIF se vuelven a descargar cada vez que se muestran.

EDITAR: es una presentación de diapositivas en bucle, y estoy tratando de evitar volver a cargar los GIF de la red cuando se muestran la segunda/tercera/hora posterior.

Answer 1

Debe precargar sus imágenes en el código.

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

cuando se quiere utilizar:

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

Luego, cuando se cambia la src cabo sólo cambio de los objetos de imágenes precargadas. Eso debería hacer el truco para evitar volver a descargar.

Answer 2

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

Tada!

Tenga en cuenta que el GIF se descargará cada vez, así que consérvelo en un archivo pequeño.

Answer 3

Lo acabo de resolver. Coloca este código (u otra imagen estática si se quiere) en la página primera:

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

Entonces sustituirlo por el siguiente código cuando esté listo para jugar:

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

Se podrá ver a partir el comienzo del gif.

El único problema es que no puede usar la URL del gif pero solo su base64.