Speeding up Nivo-Slider

Just wondering if anyone can assist me with the following issue. I'm using nivo-slider on my HOME page to rotate 3 (large) images; hwoever, when a visitor visits the page for the first time all 3 images can been seen for a good 5 seconds before they all load into the slider.

This is the script that I'm using on the site:

    <script type="text/javascript">
    $(window).load(function() {
        $('#nivo-slider').nivoSlider({
            effect:'random', 
            slices:15,  
            animSpeed:500, 
            pauseTime:5000, 
            startSlide:0, 
            directionNav:true, 
            directionNavHide: false, 
            controlNav:true, 
            controlNavThumbs:false, 
            controlNavThumbsFromRel:false, 
            controlNavThumbsSearch: '.jpg', 
            controlNavThumbsReplace: '_thumb.jpg', 
            keyboardNav:true, 
            pauseOnHover:true, 
            manualAdvance:false, 
            captionOpacity:0.8, 
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){} 
        });
    });
    </script>

And I then have the following HTML for loading the images:

<div id="slideshow">
                 <div class="slide slide-wide bg1">
                     <div class="containit ornament-left">
                         <div class="image">
                            <div class="thumb">
                              <div id="nivo-slider">
                                <a href="/service/"><img src="/images/slider/slide1.jpg" alt="" title="" /></a>
                                <a href="/service/"><img src="/images/slider/slide2.jpg" alt="" title="" /></a>
                                <a href="/service/"><img src="/images/slider/slide3.jpg" alt="" title=""/></a>
   开发者_JAVA技巧                             </div>
                            </div>
                         </div>
                     </div>
               </div>
      </div>

Does anyone know how to improve image load speed with this script and if so can you help me with it please. Thanks

Add display: none to #slider img. That will hide all the images until NivoSlider displays them properly.

Sorry, my first answer was entirely wrong, try:

#slider {
    position:relative;
    width: 800px; //your image width
    height: 583px; //your image height
 }
#slider img {
    position:absolute;
    top:0px;
    left:0px;
 }

You can check my implementation here: http://www.duopixel.com/portafolio/