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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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