play gif once

Question

play gif once

Navigation

#1 by (2 votes)

2

I want to put a gif which should only be played once and be paused in the last frame. Currently in the html I have this:

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

and in the css I have this:

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

So, can you make it play once and be paused in the last frame with css or do you have to do it with jquery / javascript?

javascript html css gif

asked by Fernando Azarías 29.06.2017 в 15:56

source

1 answer

Create query without repeating column value Search with stored procedure

score 2 · Answer 1

In principle this can not be done because it is normally done is edit the GIF, you have two one with repetition and one without it, when you are interested with JS you change one for another.

Anyway you have libraries like

link = > Prevents gif autoplay

Or in stackoverflow English version this script was published

[].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);
    }
}

Origin of the information in the thread: link