javascript - Is there a way of syncing gif files?

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.

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.

Share Improve this question asked Oct 12, 2012 at 14:35 williamsongibson 2773 silver badges11 bronze badges

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 Commented Oct 12, 2012 at 14:37
I thought this would be the answer Archer. What do you mean by "reset the src"? – williamsongibson Commented Oct 12, 2012 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 Commented Oct 14, 2012 at 10:15

Add a comment |

3 Answers 3

Sorted by: Reset to default 16

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.

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.

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()">.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Is there a way of syncing gif files? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)