8

I have a page with 7 gif files on it.

Is there a way to sync them all, so they start playing at the same time?

I was thinking of preloading them, but still they may not start synced if one takes longer to load than another.

williamsongibson
  • 267
  • 3
  • 11
  • 6
    You have no control over starting gif files with javascript (or any javascript libraries). The best you could do is to preload them and then reset the src for them all at the same time once they're all loaded. That would make them all restart. – Reinstate Monica Cellio Oct 12 '12 at 14:37
  • I thought this would be the answer Archer. What do you mean by "reset the src"? – williamsongibson Oct 12 '12 at 14:38
  • There's 2 ways to go. Either have the images on the page and let them all load, or have the images on the page hidden and load them into memory, using image objects that are purely in the script. Once they're all loaded, just set the src for each of the images in the page. By resetting the src, I simply meant set the src attribute to what it already is - `$("img").each(function() { $(this)[0].src = $(this)[0].src; });` – Reinstate Monica Cellio Oct 14 '12 at 10:15

3 Answers3

15

As @Archer pointed out above, one way to do it is to preload them then reset the src. Using jquery you could do something like:

$(window).load(function() {
    $('.preload').attr('src', function(i,a){
        $(this).attr('src','').removeClass('preload').attr('src',a);
    });
});

See it on jsfiddle.

h0tw1r3
  • 6,618
  • 1
  • 28
  • 34
3

Consider replacing your gifs with png sequences (sprite sheets), or even jpg sequences, depending on type of content.

Create a div of the desired animation size, set sprite sheet as background image with overflow hidden.

Create a timer in javascript that updates all animations (background image positions) at the same time with each tick allowing you to control the frame rate very precisely.

I've used this technique before and it works well if your sprite sheets are not affecting load times too much.

Kayo
  • 702
  • 3
  • 10
-2

Try preloading them all in the head of the page and run them when the body loads. Make a function, function gifs{} maybe, and run it like this: <body onload="gifs()">.

Simon Carlson
  • 1,919
  • 5
  • 24
  • 35