Safari’s WebKit has a funny behavior of displaying animated gif files at a lower frame rate than Firefox. From what I can tell, WebKit (including Google Chrome) caps the animated gif frame rates at 10fps. While it may be faster than some IE6 browsers, it’s not exactly helpful for those files with higher frame rates.

For example, the popular ajax loader file that hails from Apple’s own asynchronous progress indicator, has 12 points and loops around once a second. Well, for one thing, 12fps is really choppy (so I’ve made the fading spokes a little more smoother at 24pfs), but it already plays slower on Apple’s nifty browser.

jQuery to the rescue

Did you know that jQuery can control css background positions? Are you thinking what I’m thinking?

But first, back to drawing board

So the first part was to break up the animated gif frames and spread them out across a very long canvas. Since Photoshop no longer opens animated gif files (unless you own ImageReady somewhere), Fireworks can open the file. Use Fireworks to export the frames to individual files and THEN Photoshop can import all the files as a stack.

File > Scripts > Load Files into Stack…

For our ajax loader, expand all the layers next to each other and then save it out to its own gif. The file size won’t be that difference in fact.

All of the frames set side by side

Now let’s get back to jQuery

In our html, just set the div with a width and height to match your gif to prevent clipping and let the script do the rest.

Now we have a script that will snap the position of the background over each “frame” at the correct frame rate. Actually, the frame rate is not divisible by 1000, but it’s close and it’s not like you could tell.

The only problem with this script is that it’s constantly running. If you look at the page in Firebug, your going to see the code whipping around with new values all the time. Annoying! Also, chances are your page isn’t going to need some animation playing constantly. Ajax loaders are intermittently called when a simple action is called as a… asynchronous progress indicator! Who knew.

So we’re going to put in a cancel command to this script: clearTimeout.

Add in a toggle so show how to turn on and off the animation and were done.

It even works on ie6!

Take a look! example