Redémarrez une animation gif sans recharger le fichier

Question

Est-il possible de redémarrer une animation gif sans télécharger le fichier à chaque fois? Mon code actuel ressemble à ceci:

var img = new Image();
img.src = 'imgages/src/myImage.gif';

$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );

Modifier

Lorsque j'insère le gif dans le dom, l'animation gif ne redémarre pas. Je ne peux y parvenir qu'en ajoutant une chaîne aléatoire à l'image src, mais cela téléchargera à nouveau l'image. 

Je veux savoir s'il est possible de redémarrer l'animation gif sans télécharger le gif.

Answer 1

J'ai eu la même exigence.

var img = document.createElement("img"),
    imageUrl = "http://i73.photobucket.com/albums/i231/charma13/love240.gif";
img.src = imageUrl;
document.body.appendChild(img);

window.restartAnim = function () {
    img.src = "";
    img.src = imageUrl;
}

Answer 2

par exemple, sur Facebook, les émoticônes animées ne sont pas des .gifs, mais un ensemble d'images statiques sur un fichier png avec un décalage d'arrière-plan défini de manière dynamique. De cette façon, vous avez le contrôle total de votre animation à partir de javascript - vous pouvez même la suspendre/réactiver ou en modifier la vitesse.

Il est possible de diviser votre fichier .gif en images séparées et de générer dynamiquement un fichier .png sur le serveur.

Cela ressemble à un bon projet de fin de semaine pour moi;)

Answer 3

Juste faire la boucle pour toujours? sinon, vous pouvez utiliser une requête ajax every (duration of gif) pour la redémarrer.

même avec javascript, ce serait possible;

var gif
window.onload=function () {
  gif=document.getElementById('id')
  setInterval(function () {
    gif.src=gif.src.replace(/\?.*/,function () {
      return '?'+new Date()
    })
  },5000)//duration of your gif
}