Image pre-loading question

[rhfish]

I have tested image preloading on my website slide show and I can't see where it helps. Whether or not I pre-load (e.g. 20-30 jpg's at 15-20k bytes apiece) I still get delays. If I pre-load the jpg's the user has to wait a long time and as the images are being cycled, even at 8 second intervals, I still get skips. I also see the same number of bytes being download for each jpg from the web whether I pre-load or not.

I even set my arrays so that I had groups of pics that the user could select from a drop-down and the groups only preloaded as each group was selected the first time.

I have reverted to the method of the user just clicking a forward or back button. This way the user can stay on the image as long as they want and the load time is not much different with each one.

What am I missing?

Thanks for any explanation.

Rick

[pyro]

It would help tremendously to see some code...

[Jona]

Please post a link to the page or something. You might want to take a small look at this. (http://jona.t35.com/experiments/MPslideshow.html)

Jona

[rhfish]

This is an excerpt of some of the pre-loading script for some buttons. The jpg's are loaded into an array, but the technique is the same.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

var i_puppy1 = new Image();
var i_puppy2 = new Image();
var i_cute1 = new Image();
var i_cute2 = new Image();
var i_fun1 = new Image();
var i_fun2 = new Image();
var i_sleep1 = new Image();
var i_sleep2 = new Image();
var i_outfit1 = new Image();
var i_outfit2 = new Image();
var i_crazy1 = new Image();
var i_crazy2 = new Image();
var i_home1 = new Image();
var i_home2 = new Image();
var i_family1 = new Image();
var i_family2 = new Image();


i_puppy1.src = "images/b_puppy1.gif";
i_puppy2.src = "images/b_puppy2.gif";
i_cute1.src = "images/b_cute1.gif";
i_cute2.src = "images/b_cute2.gif";
i_fun1.src = "images/b_fun1.gif";
i_fun2.src = "images/b_fun2.gif";
i_sleep1.src = "images/b_sleep1.gif";
i_sleep2.src = "images/b_sleep2.gif";
i_outfit1.src = "images/b_outfit1.gif";
i_outfit2.src = "images/b_outfit2.gif";
i_crazy1.src = "images/b_crazy1.gif";
i_crazy2.src = "images/b_crazy2.gif";
i_home1.src = "images/b_home1.gif";
i_home2.src = "images/b_home2.gif";
i_family1.src = "images/b_family1.gif";
i_family2.src = "images/b_family2.gif";


function chgImg(imgField,gifNbr) {
if (document.images) {
document[imgField].src = eval("i_" + imgField + gifNbr + ".src");
}
}

// End -->
</script>

<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" width="599" height="73">
<tr> <td HEIGHT="37" width="110" align="center" valign="top">
<a href="puppy.htm" onclick="myPopup.clearHelp()" onmouseover="chgImg('puppy','2'); myPopup.startHelp('puppy')"
onmouseout="chgImg('puppy','1'); myPopup.clearHelp()">
<img name="puppy" src="images/b_puppy1.gif" border=0 align="left" width="90" height="40" ></a></td>

<td HEIGHT="37" width="98" align="center" valign="top">
<a href="cute.htm" onclick="myPopup.clearHelp()" onmouseover="chgImg('cute','2'); myPopup.startHelp('cute');"
onmouseout="chgImg('cute','1'); myPopup.clearHelp()">
<img name="cute" src="./images/b_cute1.gif" border=0 align="left" width="90" height="40" ></a></td></tr>
</table>
</body>
</HTML>