Detener una animación gif onload, al pasar el ratón iniciar la activación

Question

Detener una animación gif onload, al pasar el ratón iniciar la activación

Tengo una página con muchos GIFs.

<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="" >

Lo que estoy buscando

1 On page load = > Las animaciones para todos los gifs se detienen

2 Al pasar el ratón = > Las animaciones comienzan para ese gif

3 En mouseout = > La animación se detiene de nuevo para ese gif

Supongo que esto se puede hacer en Jquery pero no se como.

35

jquery gif

Author: Wilfred Hughes, 2011-04-28

Source

9 answers

Me doy cuenta de que esta respuesta es tardía, pero encontré una solución bastante simple, elegante y efectiva para este problema y sentí que era necesario publicarla aquí.

Sin embargo, una cosa que siento que necesito dejar en claro es que esto no inicia la animación gif al pasar el ratón, pausarla en el mouseout y continuarla cuando vuelva a pasar el ratón. Eso, desafortunadamente, es imposible de hacer con gifs. (Es posible hacer con una cadena de imágenes mostradas una tras otra para parecer un gif, pero desmontando cada fotograma de tus gifs y copiar todas esas url en un script llevaría mucho tiempo)

Lo que mi solución hace es hacer que una imagen parezca que comienza a moverse con el ratón. Haces que el primer fotograma de tu gif sea una imagen y pones esa imagen en la página web, luego reemplazas la imagen con el gif al pasar el ratón y parece que comienza a moverse. Se reinicia en mouseout.

Simplemente inserte este script en la sección head de su HTML:

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

Y poner este código en la etiqueta img de la imagen que desea animar.

id="imgAnimate"

Esto cargará el gif al pasar el ratón, por lo que parecerá que tu imagen comienza a moverse. (Esto es mejor que cargar el gif onload porque entonces la transición de la imagen estática al gif es entrecortada porque el gif comenzará en un marco aleatorio)

Para más de una imagen simplemente ~~recrear el script~~ crear una función:

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

Ese bloque de código es una página web en funcionamiento (basada en la información que me has dado) que visualización de las imágenes estáticas y en hover, carga y visualización de los gif. Todo lo que tienes que hacer es insertar la url de las imágenes estáticas.

15

Author: Mark Kramer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-05 19:17:18

Creo que el plugin de jQuery freezeframe.js podría ser útil para usted. freezeframe.js es un Plugin De jQuery Para Pausar Automáticamente Los GIFs Y Reiniciar La Animación Al Pasar El Ratón Por Encima.

Supongo que puedes adaptarlo fácilmente para que funcione en la carga de la página.

8

Author: Hirvesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-29 12:20:42

La mejor opción es probablemente tener una imagen fija con la que reemplazar el gif cuando quieras detenerlo.

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

Probablemente desee tener dos matrices que contengan rutas a los gifs fijos y animados que pueda asignar a cada imagen.

5

Author: Nick Brunt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-28 12:01:01

Puede resolver esto teniendo una franja larga que se muestra en pasos, como una tira de película. Entonces puedes detener la película en cualquier fotograma. Ejemplo a continuación (fiddle disponible en http://jsfiddle.net/HPXq4/9/):

El marcado:

 <div class="thumbnail-wrapper">
     <img src="blah.jpg">
 </div>

El css:

.thumbnail-wrapper{
   width:190px;
   height:100px;
   overflow:hidden;
   position:absolute;
}
.thumbnail-wrapper img{
   position:relative;
   top:0;
}

La js:

var gifTimer;
var currentGifId=null;
var step = 100; //height of a thumbnail
$('.thumbnail-wrapper img').hover(
   function(){
      currentGifId = $(this)
      gifTimer = setInterval(playGif,500);
   },
   function(){
       clearInterval(gifTimer);
       currentGifId=null;
   }
);

var playGif = function(){
   var top = parseInt(currentGifId.css('top'))-step;
   var max = currentGifId.height();
   console.log(top,max)
   if(max+top<=0){
     console.log('reset')
     top=0;
   }
   currentGifId.css('top',top);
}

Obviamente, esto se puede optimizar mucho más, pero simplifiqué este ejemplo para la legibilidad

2

Author: Xananax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-11 12:33:43

Para reiniciar la animación de una imagen gif, puede usar el código:

$('#img_gif').attr('src','file.gif?' + Math.random());

2

Author: Антон Баранов,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-27 19:43:20

Una versión más elegante de Mark Kramer sería hacer lo siguiente:

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

O incluso mejor sería usar atributos de datos:

$(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);
      });
  });
});

Y el img el se vería algo así como:

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

Nota: Este código no está probado, pero debería funcionar bien.

1

Author: Finn Fitzsimons,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-19 06:04:28

Solo hay una manera de lo que soy consciente.

Tiene 2 imágenes, primero un jpeg con el primer fotograma(o lo que quieras) del gif y el gif real.

Cargue la página con el jpeg en su lugar y al pasar el ratón reemplace el jpeg con el gif. Puedes precargar los gifs si lo deseas o si son de gran tamaño mostrar una carga mientras el gif se está cargando y luego reemplazar el jpeg con él.

Si quieres que el gif se reproduzca al pasar el ratón por encima, deténgalo al salir del ratón y luego reanudar la reproducción desde el marco que detuvo, entonces esto no se puede hacer con javascript+gif combo.

0

Author: daniels,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-28 11:49:12

Añadiendo un sufijo como este:

$('#img_gif').attr('src','file.gif?' + Math.random());

El navegador está obligado a descargar una nueva imagen cada vez que el usuario accede a la página. Además, la caché del cliente puede llenarse rápidamente.

Aquí sigue la solución alternativa que probé en Chrome 49 y Firefox 45.
En la hoja de estilos css establezca la propiedad display como 'none', así:

#img_gif{
  display:'none';
}

Fuera del 'document(documento).ready ' declaración insertar:

$(window).load(function(){ $('#img_gif').show(); });

Cada vez que el usuario accede a la página, el la animación se iniciará después de la carga completa de todos los elementos. Esta es la única manera que encontré para sincronizar animaciones gif y html5.

Tenga en cuenta que:
La animación gif no se reiniciará después de actualizar la página (como presionar "F5").
Documento).ready "la instrucción no produce el mismo efecto de" window (ventana).carga".
La propiedad "visibilidad "no produce el mismo efecto de"visualización".

0

Author: Leonardo Gugliotti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-07 13:09:04

score 50 · Accepted Answer

No, no se puede controlar la animación de las imágenes.

Necesitarías dos versiones de cada imagen, una animada y otra no. En hover puede cambiar fácilmente de una imagen a otra.

Ejemplo:

$(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);
    });
  });
});

Actualización:

El tiempo pasa y las posibilidades cambian. Como señaló kritzikatzi, tener dos versiones de la imagen no es la única opción, aparentemente puede usar un elemento canvas para crear una copia del primer fotograma de la animación. Tenga en cuenta que esto no funciona en todos los navegadores, IE 8 por ejemplo no soporta el elemento canvas.