jquery - Detener la carga de una animación gif, al mouseover iniciar la activación

Question

Tengo una página con muchos 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="" >

Lo que estoy buscando

1 En la página carga => Se detienen las animaciones para todos los gifs

2 En mouseover => Se inician animaciones para ese gif

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

Supongo que esto se puede hacer en Jquery, pero no sé cómo.

Answer 1

Agregar 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, el 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 estilo css configure la propiedad de visualización como ''ninguna'', como esta:

#img_gif{
display:''none'';
}

Fuera de la entrada de la declaración ''$ (document) .ready'':

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

Cada vez que el usuario accede a la página, la animación se iniciará después de la carga completa de todos los elementos. Esta es la única forma 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").
La instrucción "$ (documento) .ready" no produce el mismo efecto de "$ (ventana) .load".
La propiedad "visibilidad" no produce el mismo efecto de "visualización".

Answer 2

Creo que el plugin jQuery freezeframe.js puede ser útil para ti. freezeframe.js es un complemento de jQuery para pausar automáticamente GIF y reiniciar la animación en el Mouse Hover.

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

Answer 3

La mejor opción es, probablemente, tener una imagen fija con la que reemplaces el gif cuando quieras detenerla.

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

Es probable que desee tener dos matrices que contengan rutas a los gifs fijos y animados que puede asignar a cada imagen.

Answer 4

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 creo que debo aclarar es que esto no inicia la animación de GIF al pasar el ratón, pausarlo en el mouseout y continuarlo cuando lo muevas de nuevo. Eso, desafortunadamente, es imposible de hacer con los gifs. (Es posible hacerlo con una secuencia de imágenes mostradas una tras otra para que parezcan un gif, pero desmontar cada fotograma de tus gifs y copiar todas esas urls en un script llevaría mucho tiempo)

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

Simplemente inserta esta secuencia de comandos en la sección principal de tu HTML:

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

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

id="imgAnimate"

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

para más de una imagen simplemente recrear el guión 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 ha proporcionado) que mostrará las imágenes estáticas y al desplazarse, cargar y mostrar los gif. Todo lo que tienes que hacer es insertar las URL para las imágenes estáticas.

Answer 5

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

Necesitarías dos versiones de cada imagen, una que esté animada y otra que no. Al desplazarse, 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);
});
});
});

Actualizar:

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 cuadro de la animación. Tenga en cuenta que esto no funciona en todos los navegadores, por ejemplo, IE 8 no es compatible con el elemento canvas.

Answer 6

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

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

Answer 7

Puedes resolver esto teniendo una franja larga que muestres por pasos, como una tira de película. Entonces puedes detener la película en cualquier cuadro. Ejemplo a continuación (violín 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;
}

el 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

Answer 8

Solo hay una forma de lo que estoy enterado.

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

Cargue la página con el jpeg en su lugar y en el mouse sobre reemplazar el jpeg con el gif. Puedes precargar los gifs si quieres o si son de gran tamaño mostrar una carga mientras se está cargando el gif y luego reemplazar el jpeg con él.

Si lo haces bi linear como en hacer que el gif juegue sobre el mouse, deténgalo en el mouse y luego reanuda la reproducción desde el fotograma que detuviste, entonces esto no se puede hacer con javascript + gif combo.

Answer 9

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 ha sido probado pero debería funcionar bien.