Haga clic en el botón Reproducir imagen GIF con jQuery y comience desde el principio

onclick reload

Question

Tengo un sitio web con imágenes en él. Algunas de las imágenes son imágenes animadas GIF. Lo que hice fue mostrar una imagen estática del GIF y, en un evento de clic, se muestran las imágenes GIF reales.

Aquí está mi código:

JQuery

$(".theimage").click(function() {
$(this).addClass(''hidden'');
$(this).next().removeClass(''hidden'');
});
$(".theimage2").click(function() {
$(this).addClass(''hidden'');
$(this).prev().removeClass(''hidden'');
});

HTML

<img class="theimage" src="image_static.gif" alt=""/>
<img class="theimage2 hidden" src="image_animated.gif" alt=""/>

CSS

.hidden{
display:none !important;
}

Estoy cambiando la clase de los elementos anterior y siguiente porque puedo tener más de una imagen GIF en una sola página, lo que impide que se produzca la acción en todos ellos.

Hasta ahora todo bien, el script funciona. Lo que intento lograr realmente es que la imagen GIF siempre comience desde el principio. Por el momento, solo lo hace la primera vez. Luego, parece que continúa reproduciéndose en segundo plano y, en la segunda llamada, simplemente continúa reproduciéndose. A veces incluso se congela, algo que ver con el caché, supongo.

¿Cómo puedo lograr esto?

Answer 1

esto sería una solución para imágenes más grandes Reinicie un GIF animado de JavaScript sin volver a cargar la imagen

en un shell nut cargue la imagen en una variable javascript y luego cambie el src al hacer clic

$(function(){
var image = new Image();
image.src=''http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg 5NjAwPg/462b8072'';
$(''#img'').click(function(){
$(this).attr(''src'',image.src);
});
});

http://jsfiddle.net/GS427/1/

Es feo no pude encontrar la imagen correcta para el inicio, pero se puede ver que comienza en el mismo lugar cada vez

Answer 2

Es necesario dividir el evento del mouse en mousedown y mouseup, realizar el ocultamiento primero y mostrar el segundo o viceversa en el mousedown, luego realizar el ocultamiento primero y mostrar el segundo o viceversa en adelante,