javascript - online - Cómo detener un gif animado de bucle

make loop gif

Question

Tengo un gif animado en una etiqueta img que comienzo al reescribir el atributo src. El gif fue creado, sin embargo, para hacer un bucle y solo quiero que se reproduzca una vez. ¿Hay alguna forma, con Javascript o jQuery, de evitar que un gif animado juegue más de una vez?

Answer 1

¿Puedes saber cuánto tarda el GIF en hacer un bucle una vez? Si es así, puedes detener la imagen así:

pseudocódigo

wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze

javascript:

var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
    c.getContext(''2d'').drawImage(img, 0, 0, w, h);
    $(img).hide();
    $(c).show();
},10000);

jsfiddle

edición: olvidé agregar una referencia a la respuesta original de la que tomé esto, lo siento

Deteniendo la animación GIF programáticamente

ese no aborda el factor tiempo que necesita para un solo bucle

Además, se ha mencionado que este enfoque es problamático en ciertos casos (en realidad no funcionó cuando lo probé en Firefox en este momento ...). Así que aquí hay algunas alternativas:

1. mencionado por Mark: edita el gif en sí mismo para evitar bucles. Esta es la mejor opción si puedes. pero me he topado con casos en los que no era una opción (como la generación automatizada de imágenes por un tercero)

2. en lugar de renderizar la imagen estática con un lienzo, mantenga una versión de imagen estática y cambie para detener el bucle . Esto probablemente tiene la mayoría de los problemas como el lienzo

Answer 2

Basado en esta respuesta , es un poco caro, pero funciona. Digamos que un solo bucle toma 2 segundos. En un setTimeout después de 2 segundos de patada en un setInterval, eso restablecería la fuente de la imagen cada milisegundo:

setTimeout(function() {
    setInterval(function() {
        $(''#img1'').attr(''src'',$(''#img1'').attr(''src''))
    },1)
}, 2000)

De nuevo, probablemente solo sea una prueba de concepto, pero aquí hay una demostración: http://jsfiddle.net/MEaWP/2/

Answer 3

En realidad, es posible hacer que un gif se detenga después de una sola iteración o un número específico de iteraciones, vea un ejemplo a continuación (si aún no está detenido), o en jsfiddle .

Para hacer eso el gif debe ser creado con el número de iteraciones especificadas. Esto se podría hacer usando Screen to Gif , que permite abrir un gif o un grupo de imágenes y editarlo cuadro por cuadro.

Esta solución también le permite restablecer la animación mediante imgElem.src = imgElem.src; pero esto no funciona en MS IE / Edge.

Answer 4

No estoy seguro si esta es la mejor manera de responder a todos y hacer que aparezca después de todas las respuestas y comentarios anteriores, pero parece funcionar.

No tengo mucho control sobre el gif. Las personas publican cualquier gif que quieran como "thankyou.gif" en el directorio de su cuenta y luego el código ThankYoue ejecuta lo que haya puesto allí cuando se envía un comentario a un formulario que publicaron. Por lo tanto, algunos pueden aparecer, otros no. Algunos pueden ser cortos, otros pueden ser largos. La solución a la que he llegado es decirle a la gente que los haga 5 segundos, porque es cuando los desvaneceré, y no me importa si hacen un bucle o no. .

Gracias por todas las ideas.

Answer 5

Sé que estoy bastante tarde aquí, pero aquí está ...

No sé si irías a esta longitud pero déjame compartir un truco.

Abra el GIF en Macromedia Flash 8 (se ha desaprobado desde entonces), exporte el GIF como GIF animado. Tendrás que elegir la ubicación del archivo. Después de eso, recibirá un cuadro de diálogo con la configuración. En eso, agregue el número de veces que desea que ocurra la animación. Haga clic en Aceptar. Problema resuelto.