[FIXED] How do I cascade start multiple gifs?

Issue

I have a gif of a candle with an animated flame. My webpage will show a few of these gifs in a row. It would be much more realistic if all the gifs didn't start at once after the page loads (otherwise I get a line of 'synchronised' candles).

I can create multiple gifs with different flame animations and then randomise which ones get shown but this will take extra bandwidth and will add an extra level of complexity.

Is there a way to maybe cascade start the gifs? i.e. start each one after a random amount of time in order that they are out of synch and look a bit more realistic?

Maybe using jquery? Or simple javascript?

Many thanks

Solution

You can't do that. If you place the same image on multiple places, it's going to always look the same. You could edit the image and change the order of the frames within the gif, save and repeat this a few times, and then load the gifs, but this will only work if the images are already loaded (cached) on your browser. If this is the first time you load the page, it could just happen that an image will be loaded exactly when another image started from the first frame of the loaded image, so it will look as if they are in sync.

You could load the images using setTimeout but this will have the same problem as described above when the user first enters your page. You can delay the request for loading the file, but you have no control of the speed in which the file will be downloaded and therefor no control on when exactly the first frame will start playing.

If I were you, I'd try creating a big sprite of different images, each starting the animation from a different frame. There will be only one request and all animations will play together, making sure frames are never in sync. When displaying the images on the site, make sure to properly show only the part you want for each image. This will give you the effect of flames burning at random times.

Answered By - Narxx

Answer Checked By - Pedro (PHPFixing Volunteer)