2

quiero poner un gif el cual solo se debe reproducir una sola vez y quedar pausado en el último fotograma. Actualmente en el html tengo esto:

<div class="img"></div>

y en el css tengo esto:

.img{
     background-image: url(image/login.gif);
     height: 33px;
     width: 204px;  
}

Entonces, se puede hacer que se reproduzca una sola vez y quede pausado en el ultimo fotograma con css o hay que hacerlo con jquery/javascript?

2
  • Y si mejor editas la imagen gif para que no se repita?
    – Jemonge
    el 29 jun. 2017 a las 16:05
  • puedes usar photoscape para editar la imagen gif
    – ego2509
    el 30 jun. 2017 a las 3:47

1 respuesta 1

3

En principio esto no se puede por lo que se hace normalmente es editar el GIF, tienes dos uno con repetición y otro sin ella, cuando te interesa con JS cambias uno por otro.

De todos modos tienes librerías como

O en stackoverflow versión inglesa se publico este script

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);

function is_gif_image(i) {
    return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
    var c = document.createElement('canvas');
    var w = c.width = i.width;
    var h = c.height = i.height;
    c.getContext('2d').drawImage(i, 0, 0, w, h);
    try {
        i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
    } catch(e) { // cross-domain -- mimic original with all its tag attributes
        for (var j = 0, a; a = i.attributes[j]; j++)
            c.setAttribute(a.name, a.value);
        i.parentNode.replaceChild(c, i);
    }
}

Origen de la información en el hilo (en inglés): https://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically

1
  • 1
    Muchas gracias, finalmente he editado el gif, era solo eso. el 30 jun. 2017 a las 20:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.