ansaurus

Question

Restart an animated GIF from JavaScript without reloading the image

Answer 1

+1 A:

You should preload your images into code.

var image = new Image();
image.src = "path";

when you want to use:

nextimg_img.attr('src', image.src);

Then when you swap the src out just swap from the preloaded image objects. That should do the trick to avoid redownloading.

spinon 2010-07-07 04:33:19

Will that start the GIF animation from the beginning?

nornagon 2010-07-07 04:35:35

I don't see why it wouldn't. As I imagine that the animation doesn't actually start till it is being displayed on the screen. But I honestly haven't tried before so I can't say with 100% certainty.

spinon 2010-07-07 04:37:51

Ah, you're right -- I'm missing one detail. It's a looping slideshow. So when the GIFs come back up again, they're halfway through their animation unless I reload them.

nornagon 2010-07-07 04:42:20

That's interesting. Not sure if that affects this. Though if you are hiding the images vs removing them from the dom that would make a difference. I would say after you fade them out you should do a remove as well of the objects so it is removed from the dom. Then when you reload the image using the preloaded images it shouldn't matter.

spinon 2010-07-07 04:45:46

I'll give it a shot, thanks.

nornagon 2010-07-07 04:47:13

Hm, this doesn't seem to work. The images keep animating even when they're not in the DOM.

nornagon 2010-07-07 05:00:29

Can you post some sample code or point me to a page I could look at? I would have that removing that from the DOM and then adding a new one would have done it.

spinon 2010-07-07 05:03:57

Oh, adding a new Image()? I was just adding the preloaded image back to the dom...

nornagon 2010-07-07 05:07:45

No I meant adding div back and then setting the image to the gif. Let me check it out. You might be right. You might have to download from internet each time so that it will force replay. It's hard to say because each browser controls animated gifs differently. Let me check out your page.

spinon 2010-07-07 05:09:19

I thought I just saw a link to a page. Did you remove that comment?

spinon 2010-07-07 05:09:56

yeah, sorry -- http://nornagon.net/worldofsand-ipad

nornagon 2010-07-07 05:12:29

Ok so can you give me a rundown of what I am looking at and what you are expecting to see happen?

spinon 2010-07-07 05:18:59

Crossfading from one GIF to the next. What should happen: each time a GIF appears, it should start animating from the first frame. What is happening: when a GIF appears, it's starting from some non-first frame. (in Chrome on OSX, anyway)

nornagon 2010-07-07 05:20:58

ok I see similar in Safari on OSX but not what I see in IE on Win7

spinon 2010-07-07 05:26:26

hm, on closer inspection -- it seems like the first way of doing it does actually work, and doesn't redownload the images.At least, it doesn't any more.:S

nornagon 2010-07-07 06:12:11

ok cool. Because I think you are just out of luck with safari because I have tried a few different things and it seems to always be a problem in safari. Wish I could have helped more. Sorry.

spinon 2010-07-07 06:15:49

ansaurus

tags:

views:

answers:

Restart an animated GIF from JavaScript without reloading the image

related questions