Onclick jouer GIF image avec jQuery et commencer à partir de début

J'ai un site avec des images. Certaines des images sont des images GIF animées. Ce que j'ai fait est de montrer une image statique de la GIF et sur un événement de clic, le GIF pour les images s'affiche.

Voici mon code:

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;
}

Je suis l'évolution de la classe de la précédente et de la suivante éléments parce que je peut avoir plus d'un GIF image sur une seule page, empêchant ainsi l'action du produit pour tous les d'entre eux.

C'est très bien, le script fonctionne. Ce que je suis en train de réaliser est en fait pour l'image GIF de toujours commencer par le début. Pour le moment il ne le fait que pour la première fois. Puis, on dirait qu'il continue à jouer en arrière-plan et sur le second appel, tout simplement, il continue à jouer. Parfois même il se fige, quelque chose à faire avec le cache, je suppose.

Comment puis-je y arriver?

Pourriez-vous nous donner un JSFiddle?
Lorsqu'une image est caché, il ne s'arrête pas, il continue à jouer en arrière-plan. Je pense que vous aurez besoin de supprimer la img élément et l'ajouter à nouveau à celle du parent, ou de changer ses src attribut quand il est montré/caché.
Comment puis-je ajouter de nouveau à celle du parent?
double possible de Redémarrage d'un GIF animé à partir de JavaScript sans avoir à recharger l'image
Votre jQuery est mauvais usage $("img.theimage2") au lieu de $(".theimage2 img").

OriginalL'auteur Oscar Batlle | 2013-11-27

  1. 6

    cela pourrait être une solution à de plus grandes images Redémarrage d'un GIF animé à partir de JavaScript sans avoir à recharger l'image

    dans une coquille de noix charger l'image dans une variable javascript puis changer de la src sur cliquez sur 

    $(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/

    son laid, je ne pourrais pas trouver l'image de droite pour le départ, mais vous pouvez voir qu'il commence dans le même endroit tout le temps

    Je sais que cela fonctionne, cependant, lorsque l'image GIF est de grande taille, disons 2-3MO, il faut un certain temps pour qu'il se charge
    si vous avez chargé il caché quelque part d'autre, il allait attraper la version mise en cache (en supposant que leurs paramètres de votre navigateur le permettent...."

    OriginalL'auteur thermite

  2. 0

    Vous avez besoin de diviser la souris événement mousedown et mouseup, effectuer le masquage d'abord et montrant deuxième ou vice-versa sur mousedown alors
    effectuer le masquage d'abord et montrant deuxième ou vice-versa,

    OriginalL'auteur Anjan Kumar GJ