Façon correcte de réinitialiser une animation GIF avec affichage: aucun sur Chrome

Le moyen le plus fiable pour "réinitialiser" un GIF est en ajoutant un hasard de la chaîne de requête. Toutefois, cela ne signifie pas que le GIF sera retéléchargé à chaque fois donc, assurez-sûr que c'est un fichier de petite taille.

//reset a gif:
img.src = img.src.replace(/\?.*$/,"")+"?x="+Math.random();

Juste parce que j'ai encore besoin de ce que chaque maintenant et puis j'ai pensé que la pure JS-je utiliser la fonction peut être utile pour quelqu'un d'autre. C'est un pur JS façon de redémarrage d'un gif animé, sans la recharger. Vous pouvez appeler à partir d'un lien et/ou le document de l'événement load.

<img id="img3" src="../_Images/animated.gif">

<a onClick="resetGif('img3')">reset gif3</a>

<script type="text/javascript">

//reset an animated gif to start at first image without reloading it from server.
//Note: if you have the same image on the page more than ones, they all reset.
function resetGif(id) {
    var img = document.getElementById(id);
    var imageUrl = img.src;
    img.src = "";
    img.src = imageUrl;
};

</script>

Sur certains navigateurs, vous avez seulement besoin de réinitialiser le img.src pour lui-même et il fonctionne très bien. Sur IE vous besoin de le vider avant de le réinitialiser. Cette resetGif() récupère le nom de l'image à partir de l'id de l'image. C'est pratique dans le cas où vous changez le réel lien de l'image pour un identifiant donné parce que vous n'avez pas à vous rappeler de changer le resetGiF() appelle.

--Nico

Cela semblait fonctionner pour moi dans Chrome, il s'exécute à chaque fois juste avant que j'ai fondu dans l'image et efface ensuite les recharges de la src et de mon animation démarre maintenant à partir de début à chaque fois.

var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);

Je suis tombé sur ce fil après avoir cherché beaucoup d'autres. David Bell post m'a conduit à la solution que j'ai besoin.

Je pensais que je poste mon expérience dans le cas où il pourrait être utile pour ceux qui cherchent à accomplir ce que je recherchais. Ceci est pour le HTML5/JavaScript/jQuery web app qui sera une application iPhone via PhoneGap. Les essais en Chrome.

L'Objectif:

1. Lorsque l'utilisateur touche/clique sur Un bouton, un gif animé apparaît et joue.
2. Lorsque l'utilisateur touche/clique sur le bouton B, gif disparaît.
3. Lorsque l'utilisateur touche/clique sur le bouton Une nouvelle fois, après avoir appuyé sur/en cliquant sur le bouton
   B, gif animé devrait réapparaître et de lire à partir du début.

Le Problème:

• Sur appuyez/cliquez sur le bouton de Un, j'étais en y ajoutant le gif à un div. Il serait jouer fine.
• Puis, appuyez/cliquez sur le bouton B, j'ai été cacher le div conteneur, puis en définissant l'img src de l'gif à une chaîne vide ("). Encore une fois, pas de problème (qui est, le problème n'était pas évident).

• Puis, appuyez/cliquez sur le bouton A, après appuyez/cliquez sur le bouton B, j'ai été re-ajouter le chemin d'accès pour le gif que la src.

  - Cela ne fonctionne pas. Le gif se présentent sur les robinets/clics de bouton...cependant, plus j'ai tapoté/cliqué sur le bouton A, le plus de fois le gif serait de charger et de recommencer. C'est, si je suis allé en arrière et en avant, en appuyant sur/en cliquant sur le bouton A puis sur le bouton B 3 fois, le gif semblerait puis sur start/stop/start 3 fois...et mon ensemble de l'application a commencé à souffler. Je suppose que le gif a été chargé à plusieurs reprises, même si j'avais mis de la src à une chaîne vide lorsque le bouton B a été mis sur écoute/cliqué.

La Solution:

Après avoir regardé David Bell post, je suis arrivé à ma réponse.

1. J'ai défini une variable globale (mavar) qui a tenu le div conteneur et de l'image (avec le chemin d'accès source) à l'intérieur.
2. Sur le appuyez/cliquez sur la fonction d'Un bouton, j'ai ajouté que le div conteneur à un div parent dans les dom.
3. Dans cette fonction, j'ai créé une nouvelle variable qui contient la src chemin de la gif.

Tout comme David l'a suggéré, je l'ai fait (en plus d'un ajout):

$('#mainParent').append(myVar);
var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);

ENSUITE, dans la fonction de la touche B, j'ai mis la src à une chaîne vide, puis retiré de la div contenant le gif:

$('#my_image').attr('src', '');
$('#mainParent').find('#my_image').remove();

Maintenant, je peux appuyez/cliquez sur le bouton A puis sur le bouton B bouton A, etc., tout au long de la journée. Le gif charges et joue sur appuyez/cliquez sur le bouton A, puis se cache sur appuyez/cliquez sur le bouton B, puis charge et joue depuis le début sur d'autres robinets de bouton A chaque fois sans aucun problème.

J'ai eu des problèmes avec toutes les solutions ci-dessus. Ce qui a fonctionné a été le remplacement de la src temporairement avec un transparent 1px gif:

var transparent1PxGif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
var reloadGif = function(img) {
    var src = img.src;
    img.src = transparent1PxGif;
    img.offsetHeight; //triggers browser redraw
    img.src = src;
};