What's the best way to preload images? I'm trying to create an image tab that has around 59 png images. Here's the code I have so far:

  
    
    
    
    
    
    
        
    

  
  
  

  

    

      

        

          
FIRST DAY
          
FIRST WEEK
          
FIRST 30-DAYS
        
      
      

          
      
      
    
  
  

The thing is now my page takes a while to load, and I can't figure out why clicking on a tab seems to load the iframe slowly. Does loading the src of the iframe cause the images to be preloaded again? Would it be better to load the relevant images onclick instead of having them all load when the page opens?

I also found a good alternative in the form of lieldulev's parallel loading script (imagesQueue) but I don't know how to use it.

BTW, I am not well-versed in JavaScript, so I'm trying to learn as I work. Right now, what I'm doing is implementing techniques that I research and trying to understand their functions, hence the reason why my coding isn't as clean as I'd like it to be, sometimes even just using inefficient "brute force" codes to get the desired effect. I'd like to improve on that, though, and any help would be appreciated.

Regarding the parallel cache script, here's a test page I set up patterned after Nick's demo:

         
         
             
             
             
         
         
                
imagesQ(ueue.js) Demo
 
                
                
                
Log:
 
                 
         

At the moment, I couldn't get it to work :( I uploaded the imagesQueue script and linked it to the page and replaced the image values from the original demo page to what's in my development site.