Image preload and caching not working with javascript or html in FIREFOX

Question

Objective: I am making a stop animation with jquery and I need to load 47 images and put them as body background one after another at 450ms delay.

The part that I am having trouble with is that I can't get to cache/preload images correctly so that they switch without blinking etc...

I start the animation in $(window).load(function() {.... so everything should be loaded by then

I have tried a number of ways from stackoverflow and all over the web here are some of them:

NOTE: EVERYTHING WORKS LIKE A CHARM IN GOOGLE CHROME. FIREFOX IS PROBLEM! Site is hosted in wamp for now.

1. Jquery in document load: ( I have tried with plain javascript inserted in the <script></script> but no success

   for (var x = 1; x < 47; x++) 
   {   preloaded[x]     = new Image();
       preloaded[x].src = 'anim_frame' + x + '.png';
   }
   } // later I modifed the code to preload sets of 5 images every 5 frames, so when frame 1 is shown frames 5-10 are loaded and so on...works great in chrome
   

2. Putting all the images in html directly as <img> tags...not working.

3. jQuery get to image location - not working

I know it can be done, this site made it, why cant we? ;) http://discover.store.sony.com/be-moved/

Answer 1

Only the following solution worked in all browsers.

Calling jQuery.get on all images in doc.ready and keeping a counter on how many images have loaded. Once they are loaded display the website...in the meanwhile show a nice loader with a percentage of the images loaded ;)