Pre-loading slide show

[Philip M]

I have a slide show consisting of 20 quite large photos.

The Javascript and HTML are pretty simple. Right now there is no pre-load. It works fine but of course there is a delay of 8-10 seconds while each pic loads.

I would like to add pre-loading, but of course if all 20 jpgs are downloaded before the slideshow starts then there is an excessive time delay.

Is there a way of making lisbon2.jpg preload while lisbon1.jpg is being viewed, and so on as the viewer steps through the show the next upcoming jpg is preloaded?

Any help would be much appreciated.

<SCRIPT language="JavaScript1.1">
<!--
var photos=new Array()
var which=0

photos[0]="lisbon1.jpg"
photos[1]="lisbon2.jpg"
photos[2]="lisbon3.jpg"
photos[3]="lisbon4.jpg"
photos[4]="lisbon5.jpg"
photos[5]="lisbon6.jpg"
photos[6]="lisbon7.jpg"
photos[7]="lisbon8.jpg"
photos[8]="lisbon9.jpg"
photos[9]="lisbon10.jpg"
photos[10]="lisbon11.jpg"
photos[11]="lisbon12.jpg"
photos[12]="lisbon13.jpg"
photos[13]="lisbon14.jpg"
photos[14]="lisbon15.jpg"
photos[15]="lisbon16.jpg"
photos[16]="lisbon17.jpg"
photos[17]="lisbon18.jpg"
photos[18]="lisbon19.jpg"
photos[19]="lisbon20.jpg"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
//-->
</SCRIPT>

<br>
<input type="button" value="&lt;&lt; Back" name="B2"
onClick="backward()"> <input type="button" value="Next &gt;&gt;" name="B1"
onClick="forward()"><br><br>
<a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go back to the start</b></small></a></p>
</center></div>

[MikoLone]

I amnot sure but i think something like this might work. so I anybody else sees this fell free to smash my code and improve on it. good luck :thumbsup:


function preLoadNextImg(){
for (i = 0;i< photos.length;i++){
if (which == i){
photos[which+1]= new Image();
photos[which+1].src= "lisbon"+(which+1)+".jpg";
}
}
}


this code probably will not work but at least it is an idea that you can maybe use.

[requestcode]

Check out this link to a script in JavaScriptkit's Free Script Section:
http://www.wsabstract.com/script/script2/incrementslide.shtml