Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Restart an animated GIF from JavaScript without reloading the image

I am creating a slideshow of animations using animated GIFs. I'm crossfading from one animation to the next. The problem is: the only way I have discovered to ensure that the GIF starts animating from the first frame is to reload it each time it's shown. The GIFs are 200KB or so each, which is way too much bandwidth for a continuous slideshow.

Here's my current code. img and nextimg are <div> tags containing a single <img> each. nextimg_img is the <img> tag corresponding to the next image to be displayed.

var tmp = nextimg_img.attr('src'); nextimg_img.attr('src', ''); setTimeout(function() { nextimg_img.attr('src', tmp); }, 0); img.fadeOut('slow'); nextimg.fadeIn('slow'); 

The idea is that it sets the src attribute of the next image to '', then sets it back to the source of the GIF to be displayed.

This works — it restarts the animation from the beginning — but the GIFs seem to be redownloaded every time they are displayed.

EDIT: it's a looping slideshow, and I'm trying to avoid reloading the GIFs from the net when they get shown the second/third/subsequent time.

like image 767
nornagon Avatar asked Jul 07 '10 04:07

nornagon


People also ask

How do you repeat an animated GIF?

Loop a part of an animated GIF image Or you can right-click and choose 'Split'. Right-click on the other clips and select 'Delete'. You can now add the same GIF file and repeat the process to create a loop.

How do you make a GIF not repeat in HTML?

@ddor254 it is File menu -> Save as … -> Gif - Gif options panel. Uncheck repeat forever and set Repeat count.

How do I restart a GIF in react?

You can restart a non-infinite gif by clearing the image src and then re-setting it.

How do you repeat a GIF in HTML?

Looping is encoded into the GIF itself, not the img tag. Open the GIF in an image editor and change the mode to loop, or use a different GIF. The loop attribute is an invalid, deprecated attribute only meant to work when the src is a video.


1 Answers

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.

like image 68
spinon Avatar answered Sep 22 '22 13:09

spinon