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

jquery animated-gif

Question

Estoy creando una presentación de diapositivas de animaciones usando GIF animados. Estoy cruzando de una animación a la siguiente. El problema es: la única forma que he descubierto para garantizar que el GIF comience a animarse desde el primer fotograma es volver a cargarlo cada vez que se muestra. Los GIF son de 200 KB o más cada uno, lo que es demasiado ancho de banda para una presentación de diapositivas continua.

Aquí está mi código actual. img y nextimg son etiquetas <div> contienen un solo <img> cada una. 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 establece el atributo src de la siguiente imagen en '''' , luego lo establece de nuevo en la fuente del GIF que se mostrará.

Esto funciona: reinicia la animación desde el principio, pero los GIF parecen volver a descargarse 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 / posterior vez.

Answer 1

Debes precargar tus imágenes en código.

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

cuando quieras usar:

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

Luego, cuando intercambie el src, simplemente intercambie los objetos de imagen precargados. Eso debería hacer el truco para evitar el redownloading.

Answer 2

Lo acabo de resolver. Coloque este código (u otra imagen estática si lo desea) en la página primero:

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

Luego sustitúyalo por el siguiente código cuando esté listo para jugar:

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

Se jugará desde el principio del gif.

El único problema es que no puedes usar la URL del gif, sino solo su base64.

Answer 3

// 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 manténgalo en un archivo pequeño.