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/....jpg" /></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/][1]

and this is the JS file:

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

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).

  [1]: http://www.littlewebthings.com/projects/blinds/
  [2]: http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js
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/....jpg" /></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/][1]

and this is the JS file:

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

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).

  [1]: http://www.littlewebthings.com/projects/blinds/
  [2]: http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js