How to make javascript load faster?

Right now, we have a slideshow of images that uses javascript. However, when the page is still loading, the images would be briefly shown in a normal listed style (with bullets) before the javascript gets read and executed. Problem is, we don't want visitors to see the "naked" image list, even just briefly (sometimes it would last 2-3 seconds). We want them to immediately see just one image (not a list) that morphs into another (what the js does).

This is the html code for the slideshow:

<div class="slideshow"> 
     <ul> 
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jp开发者_JAVA技巧g" /></li> 
         <li><img src="images/....jpg" /></li>                                  
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li> 
     </ul> 
</div> 

This is the slideshow that we used:

http://www.littlewebthings.com/projects/blinds/

and this is the JS file:

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

I am thinking that this may be a cache problem as the demo slideshow above only showed the "naked" image list once. Once it is refreshed/re-visited, it no longer shows (or still shows but a lot faster than the first time that it's almost unnoticable). Ours, on the other hand, keeps on re-reading the javascript as if it's always the first time (if you know what I mean).

hide all list with css and only show the first one image. So user wont see all the list apart from first image.

Although this doesn't directly answer the question of getting it to load instantly, one option would be to start with your div hidden with <div class="slideshow" id="myId" style="visibility: hidden">, and then as soon as you know your JS has loaded, show it (e.g. using jQuery):

$( "#myId" ).css( "visibility", "visible" );

Try edit the ul style this way:

ul{
    list-style:none;
}

ul li{
    position:absolute;
}

The list wrapper must have a fixed height ;)

Hope it helps