preload pics in slideshow

[bch33]

Is there a way to preload images for a slide show that has about 20 images-- I want the images to stay up for 3 seconds --works great on fast connections but on the slower connections that is not enough time for the next picture to load, so the slide show becomes disfunctional.

HERE'S EXAMPLE OF SCRIPT



<SCRIPT LANGUAGE=&quot;JavaScript&quot;>

var rotate_delay = 3000; // delay in milliseconds (3000 = 3 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == &quot;Stop&quot ? &quot;Start&quot; : &quot;Stop&quot;;
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == &quot;Stop&quot {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout(&quot;rotate()&quot;, rotate_delay);
}
}

</script>

<form name=slideform>
<table width=&quot;71%&quot; border=&quot;0&quot;>
<tr>
<td width=&quot;19%&quot;><img src=&quot;images/menu.gif&quot; width=&quot;200&quot; height=&quot;162&quot; alt=&quot;Directions&quot; usemap=&quot;#Map&quot; border=&quot;0&quot;>
<map name=&quot;Map13&quot;>
<area shape=&quot;rect&quot; coords=&quot;2,81,184,104&quot; href=&quot;index.html&quot; alt=&quot;back to index page&quot; title=&quot;back to index page&quot;>
<area shape=&quot;rect&quot; coords=&quot;3,108,167,124&quot; href=&quot;../index.html&quot; alt=&quot;back to home page&quot; title=&quot;back to home page&quot;>
<area shape=&quot;rect&quot; coords=&quot;46,2,196,11&quot; </map>
</td>
<td width=&quot;81%&quot;>
<table cellspacing=0 cellpadding=0 align=&quot;right&quot; border=&quot;10&quot; width=&quot;212&quot;>
<tr>
<td align=center bgcolor=&quot;#CCCCCC&quot; width=&quot;190&quot;> <b></b></td>
</tr>
<tr>
<td align=center bgcolor=&quot;white&quot; width=190 height=300> <img src=&quot;images/ped/frontduo.jpg&quot; name=&quot;show&quot;>
</td>
</tr>
<tr>
<td align=center bgcolor=&quot;#C0C0C0&quot; width=&quot;190&quot;>
<select name=&quot;slide&quot; onChange=&quot;change();&quot;>
<option lue=&quot;tourimages/ped/p1.jpg&quot;>Slide1
<option value=&quot;images/ped/p2.jpg&quot;>Slide2
<option value=&quot;images/ped/p3.jpg&quot;>Slide3
<option value=&quot;tourimages/ped/l1.jpg&quot;>Slide4
<option value=&quot;images/ped/l3.jpg&quot;>Slide 5
<option value=&quot;timages/ped/l4.jpg&quot;>Slide6
<option value=&quot;images/ped/l5.jpg&quot;>Slide7
<option value=&quot;tourimages/ped/s1.jpg&quot;>Slide8
<option value=&quot;images/ped/s2.jpg&quot;>Slide9
<option value=&quot;images/ped/s3.jpg&quot;>Slide10
<option value=&quot;images/ped/s4.jpg&quot;>Slide11
<option value=&quot;images/ped/s5.jpg&quot;>Slide12
<option value=&quot;images/ped/b1.jpg&quot;>Slide 13
<option value=&quot;images/ped/b2.jpg&quot;>Slide14
<option value=&quot;images/ped/b3.jpg&quot;>Slide15
<option value=&quot;images/ped/w1.jpg&quot;>Slide16
<option value=&quot;images/ped/w2.jpg&quot;>Slide17
<option value=&quot;images/ped/w4.jpg&quot;>Slide18
<option value=&quot;images/ped/w5.jpg&quot;>Slide19

</select>
</td>
</tr>
<tr>
<td align=center bgcolor=&quot;#336699&quot; width=&quot;190&quot; height=&quot;19&quot;>
<input type=button onClick=&quot;previous();&quot; value=&quot;<<&quot; title=&quot;Previous&quot; name=&quot;button&quot;>
<input type=button name=&quot;slidebutton&quot; onClick=&quot;ap(this.value);&quot; value=&quot;Start&quot; title=&quot;AutoPlay&quot;>
<input type=button onClick=&quot;next();&quot; value=&quot;>>&quot; title=&quot;Next&quot; name=&quot;button&quot;>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>



Thanks
bch

 

[gacaccia]

you can preload images by creating image objects and setting the &quot;src&quot; property for each.

the following function is an example....

function loadImage(myPath, myImage, myType)
{
	eval (myImage + " = new Image();");
	eval (myImage + ".src = '" + myPath + myImage + "." + myType + "';");
}

once loaded, you can change the image source for an image on the document by referencing the preloaded image object name. the following function will do that for you. you need to pass in the name of the image on the document and the name of the preloaded image object...

function changeImages() {
  if (document.images) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
      document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + &quot;.src&quot;);
    }
  }
}

here are some examples of how this would impact your code...

<script src=&quot;code/imageCode.js&quot;></script>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

loadImage(&quot;images/ped/&quot;,&quot;s3&quot;,&quot;jpg&quot;);
loadImage(&quot;images/ped/&quot;,&quot;s4&quot;,&quot;jpg&quot;);
loadImage(&quot;images/ped/&quot;,&quot;s5&quot;,&quot;jpg&quot;);


var rotate_delay = 1000; // delay in milliseconds (3000 = 3 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
changeImages(&quot;show&quot;,document.slideform.slide[current+1].value);
document.slideform.slide.selectedIndex = ++current;

... and later on in the document ...

 <select name=&quot;slide&quot; onChange=&quot;change();&quot;>
                <option value=&quot;s3&quot;>Slide3 
                <option value=&quot;s4&quot;>Slide4 
                <option value=&quot;s5&quot;>Slide5

i think that should do the trick.

glenn

 

[changeme]

Thanks so much for your help,
I'll give it a try
bch