Switching the source of gif animation

Question

I have two gif animations (about 100KB each) and two radio buttons, and want to change the animation clicking them

<input type="radio" name="anima" onclick="document.getElementById('imgC').src='img01.gif';"/>
<input type="radio" name="anima" onclick="document.getElementById('imgC').src='img02.gif';"/>

The animation is changed but very often - is not animated, but in a static state. I must click the corresponding radio again (although is already checked) to start animating.

This is especially often using the second button/animation (probably because the first animation is on screen by default, i.e. by loading the page.).

score 1 · Accepted Answer · edited May 23 '17 at 12:18

UPDATE, BASED ON FEEDBACK FROM OP:

I'm running up-to-date versions of Firefox, Chrome, and Safari on OS X and the Gifs do not ever freeze for me unless I click the "(Frozen) Gif" button on the jsfiddle, so this appears to be a localized glitch for the OP.

One possible reason is that browsers sometimes skip animating a Gif initially if they're very computationally busy.. E.g. lots of tabs are open, or inefficient JS is running elsewhere on the page.

ORIGINAL ANSWER:

Hopefully I'm understanding what you're looking for correctly - you would like:

To show 1 gif and 2 radio buttons
For clicking the radio buttons to switch which Gif is shown
And, the ability to 'freeze' the Gif animation?

If that's incorrect let me know. :)

The code you've given already does (1) and (2) for me. I don't think there's any real way to freeze a Gif through Javascript, but you can kind of hack it together using the method described here (Stopping GIF Animation Programmatically)

I created a JSFiddle here:

Radio buttons 2 & 3 will swap out the Gif, and radio button 1 replaces the gif with a frozen facsimile. To "unfreeze" the gif, you would unfortunately need to entirely recreate the <img src="..."> element.

HTML:

<label><input type="radio" name="anima" onclick="freeze_gif(document.getElementById('imgC'))"/>(Frozen) Gif</label>

<label><input type="radio" name="anima" onclick="create_gif_1(document.getElementById('imgC'));" checked/>Gif 1</label>

<label><input type="radio" name="anima" onclick="create_gif_2(document.getElementById('imgC'));"/>Gif 2</label>
<br>
<img id='imgC' src='http://25.media.tumblr.com/tumblr_m5kv2t19Mm1rqk3zwo1_400.gif'>

JS:

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);
    }
}

function create_gif_1(i) {
    var img = document.createElement("img");
    img.src = 'http://25.media.tumblr.com/tumblr_m5kv2t19Mm1rqk3zwo1_400.gif';
    i.parentNode.replaceChild(img, i);
    img.id = i.id;
}

//function create_gif_2(i) { ... same ... }

EDIT: I should add that the Gif-freezing trick is not supported by IE8

Don McCurdy, thanks a lot, but the problem IS BECAUSE THE ANIMATION IS IN A FREEZING STATE, AND SHOULD NOT BE. The should be in a normal, animating state. I must click twice (instead of once) on a radio to animate them and this is the problem — qadenza, Jun 02 '13 at 05:31
When the page first loads, before you click anything, the Gif is frozen for you? That should not be happening (tested in recent versions of Safari, Firefox, and Chrome). What browser are you using? — Don McCurdy, Jun 02 '13 at 05:33
I'm using firefox 21 and when page is loaded the animation works ok. Clicking on radio buttons the animation is switched, but blocked, just static image is on screen, so I must click again on the same radio to animate them. I saw, on your jsfiddle that happens twice. — qadenza, Jun 02 '13 at 05:40
Well hmm. I'm running Firefox v21 on OS X and the Gifs do not ever freeze for me unless I click the "(Frozen) Gif" button on the jsfiddle. I'm afraid I can't help much without being able to reproduce this. All I can think of is that browsers sometimes skip animating a Gif initially if they're very busy, computationally.. E.g. lots of tabs, or inefficient JS elsewhere on the page. — Don McCurdy, Jun 02 '13 at 05:48
I believe that's something like that. Thanks a lot for your efforts. Maybe you should place your last comment as answer, so I could accept it. — qadenza, Jun 02 '13 at 05:51

Switching the source of gif animation

1 Answers1