web-dev-qa-db-fra.com

Arrêtez une animation gif en cours, passez la souris au moment de l'activation

J'ai une page avec beaucoup de GIF. 

<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >

Ce que je cherche

1 On page load => Les animations de tous les gifs sont arrêtées

2 Au passage de la souris => Les animations commencent pour celui-là gif

3 On mouseout => L'animation s'arrête à nouveau pour ce gif

Je suppose que cela peut être fait dans Jquery mais je ne sais pas comment.

jquerygif
35
denislexic

Non, vous ne pouvez pas contrôler l'animation des images.

Vous aurez besoin de deux versions de chaque image, une animée et une autre non. En vol stationnaire, vous pouvez facilement passer d'une image à une autre.

Exemple:

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

Mettre à jour:

Le temps passe et les possibilités changent. Comme l'a souligné kritzikatzi, l'utilisation de deux versions de l'image n'est pas la seule option. Vous pouvez apparemment utiliser un élément de la toile pour créer une copie de la première image de l'animation. Notez que cela ne fonctionne pas dans tous les navigateurs, IE 8 par exemple ne supporte pas l'élément canvas.

50
Guffa

Je me rends compte que la réponse est tardive, mais j’ai trouvé une solution assez simple, élégante et efficace à ce problème et j’ai jugé nécessaire de la poster ici.

Cependant, une chose que j’ai besoin de préciser est que cela ne démarre pas l’animation gif au passage de la souris, ne la met en pause lors du passage de souris, et ne la continue pas lorsque vous passez la souris à nouveau. Cela est malheureusement impossible à faire avec des gifs. (Il est possible d'utiliser une chaîne d'images affichées l'une après l'autre pour ressembler à un gif, mais il serait fastidieux de décomposer chaque image de vos gifs et de copier toutes ces URL dans un script.)

Ma solution est de donner l’image d’une image qui commence à se déplacer au passage de la souris. Vous faites la première image de votre gif une image et placez cette image sur la page Web, puis remplacez l’image par le gif au passage de la souris et on dirait qu’elle commence à bouger. Il se réinitialise lors du mouseout.

Il suffit d'insérer ce script dans la section head de votre code HTML:

$(document).ready(function()
{
    $("#imgAnimate").hover(
        function()
        {
            $(this).attr("src", "GIF URL HERE");
        },
        function()
        {
            $(this).attr("src", "STATIC IMAGE URL HERE");
        });
});

Et placez ce code dans la balise img de l'image que vous souhaitez animer.

id="imgAnimate"

Cela chargera le gif au survol de la souris, ainsi votre image commencera à bouger. (C'est mieux que de charger le gif onload parce qu'alors la transition d'image statique à gif est agitée, car le gif commencera sur une image aléatoire)

pour plus d'une image juste recréer le script créer une fonction: 

<script type="text/javascript">

var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";

$(document).ready(function() {

  $(".img-animate").each(function () {

     $(this).hover(
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
        },
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));  
        }
     );

  });

});
</script>

</head>
<body>

<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >

</body>

Ce bloc de code est une page Web fonctionnelle (basée sur les informations que vous m'avez fournies) qui permet d'afficher les images statiques et de survoler, de charger et d'afficher les gif. Tout ce que vous avez à faire est d'insérer l'URL des images statiques.

15
Mark Kramer

Je pense que le plugin jQuery freezeframe.js pourrait vous être utile. freezeframe.js est un plugin jQuery pour suspendre automatiquement les fichiers GIF et redémarrer l'animation au survol de la souris.

Je suppose que vous pouvez facilement l’adapter pour le faire fonctionner avec un chargement de page.

8
Hirvesh

La meilleure option est probablement d'avoir une image fixe avec laquelle vous remplacez le gif lorsque vous voulez l'arrêter.

<img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >

$(window).load(function() {
  $(".anim").src("stillimage.gif");
});

$(".anim").mouseover(function {
  $(this).src("animatedimage.gif");
});

$(".anim").mouseout(function {
  $(this).src("stillimage.gif");
});

Vous souhaiterez probablement avoir deux tableaux contenant des chemins vers les gifs fixes et animés que vous pouvez affecter à chaque image.

5
Nick Brunt

Pour relancer l'animation d'une image gif, vous pouvez utiliser le code suivant:

$('#img_gif').attr('src','file.gif?' + Math.random());
2
Антон Баранов

Une version plus élégante de Mark Kramer serait la suivante:

function animateImg(id, gifSrc){
  var $el = $(id),
    staticSrc = $el.attr('src');
  $el.hover(
    function(){
      $(this).attr("src", gifSrc);
    },
    function(){
      $(this).attr("src", staticSrc);
    });
}

$(document).ready(function(){
  animateImg('#id1', 'gif/gif1.gif');
  animateImg('#id2', 'gif/gif2.gif');
});

Ou mieux encore, utilisez des attributs de données:

$(document).ready(function(){
  $('.animated-img').each(function(){
    var $el = $(this),
      staticSrc = $el.attr('src'),
      gifSrc = $el.data('gifSrc');
    $el.hover(
      function(){
        $(this).attr("src", gifSrc);
      },
      function(){
        $(this).attr("src", staticSrc);
      });
  });
});

Et l’img el ressemblerait à quelque chose comme:

<img class="animated-img" src=".../img.jpg" data-gif-src=".../gif.gif" />

Remarque: ce code n'a pas été testé mais devrait fonctionner correctement.

1
Finn Fitzsimons

D'après ce que je sais, il n'y a qu'un moyen. 

Avoir 2 images, d'abord un jpeg avec la première image (ou ce que vous voulez) du gif et du gif réel. 

Chargez la page avec le jpeg en place et sur la souris, remplacez le jpeg par le gif. Vous pouvez précharger les gifs si vous le souhaitez ou s'ils sont de grande taille, afficher un chargement pendant le chargement du gif, puis remplacer le jpeg par celui-ci.

Si vous voulez qu'il soit bi linéaire comme dans le gif, passez le curseur de la souris dessus, arrêtez-le au bout de la souris, puis reprenez la lecture à partir de l'image arrêtée. Cela ne peut pas être fait avec la combinaison javascript + gif.

0
daniels

Réponse associée, vous pouvez spécifier le nombre de lectures sur un gif. Le fichier GIF ci-dessous est associé à 3 lectures (minuterie de 10 secondes, total de la lecture de 30 secondes). 30 secondes après le chargement de la page, la lecture s'arrête à "0:01".

Actualisez la page pour redémarrer les 3 lectures

Vous devez modifier le gif lui-même. Vous trouverez ici un outil simple pour modifier les lectures GIF https://ezgif.com/loop-count .

Pour voir un exemple de lecture gif en boucle unique en action sur une page de destination, consultez ce site en utilisant un gif en lecture unique https://git-lfs.github.com/

enter image description here

0
Vincent Tang