How to use JS to trigger a GIF animation?

Question

I have an animated GIF that plays once (doesn't loop). I would like it to animate when clicked. I tried something like this:

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

With the hope that quickly resetting the src would trigger the animation, but no luck. Anyone know what would do it?

possible duplicate of [disable cache for some images](http://stackoverflow.com/questions/728616/disable-cache-for-some-images) — Peter Ajtai, Oct 21 '10 at 15:52

score 8 · Accepted Answer · answered Oct 21 '10 at 15:34

8

Try adding the image with a randomly generated querystring so it looks like a new image to the browser.

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>

answered Oct 21 '10 at 15:34

adam0101

23,476
18
75
147

I just grabbed a random string generator off the internet: http://www.mediacollege.com/internet/javascript/number/random.html – adam0101 Oct 21 '10 at 15:38
2

Thanks man, you nailed it. But I think my way is easier: `$('#plus').attr('src','img/plus.gif?x='+Math.round(Math.random()*1000));` – Isaac Lubow Oct 21 '10 at 15:44
5

Time stamp is better than randomly generated. Also look here ==> http://stackoverflow.com/questions/728616/disable-cache-for-some-images – Peter Ajtai Oct 21 '10 at 15:49
Unless you can click on the image twice in less than a millisecond, – kennebec Oct 21 '10 at 16:35
@kennebec - You probably don't want the animation running that many times anyway. – Ryan Kinal Oct 21 '10 at 17:00
A note: this solution ended up being wrong for me because of the non-trivial delay in loading the GIF made it not-snappy enough to be a working UI effect. – Isaac Lubow Oct 23 '10 at 06:05

score 2 · Answer 2 · answered Oct 21 '10 at 16:57

2

function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

Tart it up with jQuery syntax, if you like.

answered Oct 21 '10 at 16:57

kennebec

94,076
30
99
125

score 1 · Answer 3 · answered Oct 21 '10 at 15:52

This is a bit of an alternative approach.

You could export the individual frames as their own images and handle animation via javascript.

It lets you do a couple of cool things. A colleague recently had a little timer animation that was synced to the configurable slideshow interval in our image gallery.

The other thing you get out of this is you could use pngs and have translucent backgrounds.

There's probably a sprite animation library for javascript out there somewhere :)

score 0 · Answer 4 · answered Aug 06 '14 at 17:21

For those who want to do this when it scrolls into view i did the following.

Link for appear.js : https://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

I just loaded the same gif via the attr('src') upon visiblity after a short delay. No timestamp or random char function. Just used appear plugin.

score 0 · Answer 5 · answered Oct 21 '10 at 15:32

0

Have you tried removing the img tag and adding it back again? (never tried it, just an idea)

answered Oct 21 '10 at 15:32

mdrg

3,095
2
20
42

score 0 · Answer 6 · answered Oct 21 '10 at 15:34

You could try having a single-frame image (of the first frame of animation) and show/hide each one on click. If you want it to reset back to the single-frame image when the animation is done, you could use setTimeout (with how long the animation is as the length of time) and have it hide the animation and show the static image.

How to use JS to trigger a GIF animation?

6 Answers6