Preload images jQuery cycle

Hi all

I have a simple jquery cycle slideshow here:

http://www.ttmt.org.uk/gallerytest/nothumbs.html

This demo has alot of image 30+ to illustrate my problem.

When the page first loads there is a bit of a delay before the slideshow start

I think this is because the page is waiting for all the images to load.

I'm hiding the images and just showing the first img while the page loads to stop all the
images from flashing up when the page loads.

Code:
#slideshow img{
     display:none;
   }
   #slideshow .first{
     display:block;
   }
Is it possible to load the first few images while the rest of the images are loading.
so i could at least show 2 or 3 images.

Code:
<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    
    
    #slideshow img{
      display:none;
    }
    #slideshow .first{
      display:block;
    }
    
  </style>
  
  </head>
  
<body>

  <div id="slideshow">
    <img src="images/car/car01.jpg" class="first" alt="" />
    <img src="images/car/car02.jpg" alt="" />
    <img src="images/car/car03.jpg" alt="" />
    <img src="images/car/car04.jpg" alt="" />
    <img src="images/car/car05.jpg" alt="" />
    <img src="images/car/car06.jpg" alt="" />
    <img src="images/car/car07.jpg" alt="" />
    <img src="images/car/car08.jpg" alt="" />
    <img src="images/car/car09.jpg" alt="" />
    <img src="images/car/car10.jpg" alt="" />
    <img src="images/plane/plane01.jpg" alt="" />
    <img src="images/plane/plane02.jpg" alt="" />
    <img src="images/plane/plane03.jpg" alt="" />
    <img src="images/plane/plane04.jpg" alt="" />
    <img src="images/plane/plane05.jpg" alt="" />
    <img src="images/plane/plane06.jpg" alt="" />
    <img src="images/plane/plane07.jpg" alt="" />
    <img src="images/plane/plane08.jpg" alt="" />
    <img src="images/plane/plane09.jpg" alt="" />
    <img src="images/plane/plane10.jpg" alt="" />
    <img src="images/boat/boat01.jpg" alt="" />
    <img src="images/boat/boat02.jpg" alt="" />
    <img src="images/boat/boat03.jpg" alt="" />
    <img src="images/boat/boat04.jpg" alt="" />
    <img src="images/boat/boat05.jpg" alt="" />
    <img src="images/boat/boat06.jpg" alt="" />
    <img src="images/boat/boat07.jpg" alt="" />
    <img src="images/boat/boat08.jpg" alt="" />
    <img src="images/boat/boat09.jpg" alt="" />
    <img src="images/boat/boat10.jpg" alt="" />
    <img src="images/plane/plane01.jpg" alt="" />
    <img src="images/plane/plane02.jpg" alt="" />
    <img src="images/plane/plane03.jpg" alt="" />
    <img src="images/plane/plane04.jpg" alt="" />
    <img src="images/plane/plane05.jpg" alt="" />
    <img src="images/plane/plane06.jpg" alt="" />
    <img src="images/plane/plane07.jpg" alt="" />
    <img src="images/plane/plane08.jpg" alt="" />
    <img src="images/plane/plane09.jpg" alt="" />
    <img src="images/plane/plane10.jpg" alt="" />
    <img src="images/boat/boat01.jpg" alt="" />
    <img src="images/boat/boat02.jpg" alt="" />
    <img src="images/boat/boat03.jpg" alt="" />
    <img src="images/boat/boat04.jpg" alt="" />
    <img src="images/boat/boat05.jpg" alt="" />
    <img src="images/boat/boat06.jpg" alt="" />
    <img src="images/boat/boat07.jpg" alt="" />
    <img src="images/boat/boat08.jpg" alt="" />
    <img src="images/boat/boat09.jpg" alt="" />
    <img src="images/boat/boat10.jpg" alt="" />
  </div><!-- #slideshow -->

  <div id="thumbWrap">
    <ul id="thumbs">
      
    </ul>
  </div>

  <script type="text/javascript">
  
    $(window).load(function() { 
      //
      //cycle
      //
      $('#slideshow').cycle({ 
          fx:     'fade', 
          speed:  'fast', 
          timeout: 3000,
      });
      
    });
    
  </script>

</body>

</html>