$20

JQuery Visual Image Preloader

Hi,

I have some JQuery functionality in a custom portfolio page of my wordpress theme that I need some help with.

Essentially what the code does is hides all the images<img> on the page, loads them behind the scenes, and then fades them in one by one. I have the images placed in a 'frame' that has an animated gif set as the background image via CSS, so there's a loading animation while the main image is loading. Its a pretty slick effect, but its not working 100% correctly.

Everything is working as intended, but sometimes the images will stay visible for 2-3 seconds, and then disappear, and then load and fade in. I need the images to get hidden right away so it actually looks like they are loading. I tried moving my code higher up in the source code thinking that would help, but it didn't.

You can take a look at the JQuery code here:
http://www.pastie.org/private/0wmuhlwkmx5ee5k9yagq

This isn't my site, but you can see the very similar the pre-loading effect in action:
http://themes.mysitemyway.com/infocus/gallery/

Thank you very much for your help.