Cómo evitar que un gif animado se reproduzca en bucle

Este dilema se puede solucionar de variadas formas, pero en este caso te mostramos la que para nosotros es la respuesta más completa.

Solución:

Estaba teniendo el mismo problema con un gif animado. La solución es bastante simple.

1. Abra el gif animado en Photoshop.

2. Vaya a la pestaña Ventana y seleccione la línea de tiempo (si la línea de tiempo aún no está abierta).

3. En la parte inferior del panel de la línea de tiempo, encontrará una opción que dice “Para siempre”. Cambia eso a “Una vez”.

4. Vaya a Archivo> Exportar> Exportar para Web y guárdelo como un gif.

Deberias hacer eso.

¿Puedes averiguar cuánto tarda el gif en repetirse una vez? si es así, puede detener la imagen de esta manera:

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

editar:
Olvidé agregar una referencia a la respuesta original de la que tomé esto, lo siento

Detener la animación GIF programáticamente

ese no aborda el factor de tiempo que necesita para un solo ciclo

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

1. mencionado por Mark: edite el gif en sí mismo para evitar bucles. esta es la mejor opción si se puede. pero me he encontrado con casos en los que no era una opción (como la generación automática de imágenes por parte de un tercero)

2. en lugar de representar el static imagen con lienzo, mantenga un static versión de la imagen y cambie para detener el bucle. esto probablemente tiene la mayoría de los problemas como lo del lienzo

Basado en esta respuesta, es un poco caro, pero funciona. Digamos que un solo ciclo toma 2 segundos. En un setTimeout después de 2 segundos, se inicia un setInterval, que 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/

Comentarios y calificaciones de la guía

Recuerda algo, que te damos el privilegio valorar esta división si diste con el hallazgo.

---

---

Utiliza Nuestro Buscador