Redémarrer le GIF animé comme image de fond

Est-il possible de redémarrer un GIF animé utilisé comme background-image?

Considérer ce HTML:

<div id="face">
    <div id="eyes"></eyes>
</div>

Et ce style:

#eyes.blink {
    background-image:url('blink.gif');
}

Je voudrais le blink.gif animation à jouer à chaque fois que j'ajoute la classe blink à #eyespas seulement la première fois.

Je m'attendais à ce travail:

function startBlink() {
    $('#eyes').addClass('blink');
}

function stopBlink() {
    $('#eyes').removeClass('blink');
}

Le problème est que Firefox et navigateur WebKit ne jouent pas un background-image GIF animation de nouveau une fois qu'il a joué qu'une seule fois. Ajout/retrait de la classe de clin fonctionne uniquement la première fois.

source d'informationauteur hpique

Vous pouvez obtenir le gif animé de la relecture par le recharger. Ce n'est pas idéal pour la bande passante, en particulier si votre image est grande, mais il force un redémarrage de l'animation.

Dans mon exemple, je suis en ajoutant et supprimant onclick de <div id="animated">:

$('#animated').click(function() {

    /* Reference to the clicked element and toggle the .go class */
    var $div = $(this);
    $div.toggleClass('go');

    /* Start the animated gif */
    if ($div.hasClass('go')) {

        /* Create an <img> element and give it the animated gif as a src.  To 
           force a reload we add a date parameter to the URL */
        var img = document.createElement('img');
        img.src = "http://yoursite.com/animated.gif?p" + new Date().getTime();

        /* Once the image has loaded, set it as the background-image */
        $(img).load(function(){
            $div.css({backgroundImage: "url("+img.src+")"});
        });

    /* Remove the background-image */        
    } else {
       $div.css({backgroundImage: "none"});
    }
})

Démo de dans l'action.

6

J'ai trouvé, vous pouvez également ajouter un ?+Math.random() à la fin de l'image src et il vas recharger le .gif.

Avez-vous envisagé d'utiliser la même image deux fois appelé blink.gif et blink2.gif, l'ajout de deux classes pour eux et le basculement entre les classes?

<div id="face">
    <div id="eyes"></eyes>
</div>

.blink {
    background-image:url('blink.gif');
}

.blink2 {
    background-image:url('blink2.gif');
}

function MakeBlink()
{
   if ($('#eyes').hasClass('blink'))
   {
      $('#eyes').removeClass('blink').addClass('blink2');
   } else
   {
     $('#eyes').removeClass('blink2').addClass('blink');
   }
}

1

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
1

Il y a une alternative qui ne se recharge pas le GIF de tous les temps et le gaspillage de la bande passante.

Il consiste à stocker les images en Base64 dans la mémoire (contournement du cache du navigateur), et utilise le FileReader API (ce qui semble être pris en charge dans tous les navigateurs modernes). Notez que le chargement des images de cette façon, est soumis à un contre-la politique de l'origine (contrairement à l'image de rechargement des solutions.)

Mise à jour: mise en cache du Navigateur devient plus intelligent sur la mise en cache de fond de l'image des données d'URI, provoquant l'animation de ne pas recommencer. J'ai trouvé, j'ai dû ajouter un cache-busting chaîne aléatoire aux données de l'url (ce qui selon le DataURI Régimedoit être considéré comme un attribut facultatif. Testé dans Chrome & IE Bord.)

Le voir en action: http://jsfiddle.net/jcward/nknLrtzL/10/

Voici comment cela fonctionne. Cette fonction charge l'image comme une chaîne Base64.
```
function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob'; //IE11, set responseType must come after .open()
  xhr.send();
}
```
Puis, à un moment quelconque, vous souhaitez redémarrer l'animation GIF, changer la background-image propriété nonepuis la chaîne base64 (dans certains navigateurs, vous devez ajouter de nouveau l'enfant pour déclencher la mise à jour sans un setTimeout):
```
$div.css({backgroundImage: "none"});
$div.parent().add($div); //Some browsers need this to restart the anim
//Slip in a cache busting random number to the data URI attributes
$div.css({backgroundImage: "url("+img_base64.replace("image/gif","image/gif;rnd="+Math.random())+")"});
```
Grâce à cette réponse pour la toDataURL fonction (avec correction pour IE11.)
0

Pour quelque raison cela fonctionne:
```
//Append the image to the page
var i = new Image();
i.src = 'some.gif';
document.body.appendChild(i);

//Now execute this line and the gif will restart
//(anywhere it appears on the page, including CSS backgrounds)
i.src = 'some.gif';
```
Cela nécessite une image réelle de l'élément DOM pour être ajouté à la page, mais vous pouvez la masquer avec visibility: hidden. Cette n'est pas besoin de l'image pour être téléchargé sur le réseau à de multiples reprises.

J'ai uniquement testé avec Firefox et Chrome. Pas sûr que sur les autres navigateurs.
0

Concernant cette réponse posté par Frédéric Leitenbergerj'ai trouvé que cela fonctionne à merveille.

Cependant, il se décompose si votre image de fond d'écran a plusieurs parties en couche, comme ceci:
```
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg),
    radial-gradient(ellipse at center,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0) 80%);
```
Pour contourner cette limitation, j'ai modifié la ligne qui trouve l'image d'arrière-plan de l'url, comme ceci:
```
var bgImg = style.backgroundImage.match(/url$([^$]+)\)/)[1].replace(/"/g, '');
```
Il utilise une expression régulière pour extraire juste la partie URL de l'image de fond d'écran.

J'aurais ajouté ceci dans un commentaire de l' lié répondremais je suis un noob sans réputation, donc, était bloqué de le faire. Ceux avec suffisamment de rep pouvez ajouter la ligne à la réponse exacte.

Vous devez vous connecter pour publier un commentaire.