Slideshow script with image preload

[suzie-q]

I have a slide show that I use but I want to preload the images.
Here's my script as it currently is:
<form>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
NewImg = new Array (
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME1]",
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME2]",
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME3]",
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME4]"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
// End -->
</script>
<img

src="http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME1]"

name="slideshow">
</p>
<div ALIGN="center">
<table>
<tr>


<td align="center">


<p ALIGN="center">


<a HREF="javascript:chgImg(-1)">


<img SRC="http://www.suzie-qs.com/images/lilacarr2.gif" BORDER="0"

WIDTH="22" HEIGHT="33"></a></td>


<td align="center"><b>


<a href="javascript:auto()">


<font COLOR="#715991">Auto/Stop</font></a></b></td>


<td align="center">


<a href="javascript:chgImg(1)">


<img SRC="http://www.suzie-qs.com/images/lilacarr.gif" BORDER="0"

WIDTH="22" HEIGHT="33"></a></td>
</tr>
</table></div>
<p>
<p>
</form>
Where do I put the onload event and what instructions do I need for it?

[steelersfan88]

to preload the images, you must define the images as an image:<!-- Not PHP -->
<script type="text/javascript">

var preloads = new Array
preloads[0] = new Image()
preloads[0].src = "image source"
preloads[1] = new Image()
preloads[1].src = "image source"
preloads[2] = new Image()
preloads[2].src = "image source"
preloads[3] = new Image()
preloads[3].src = "image source"

for(var i=0;i<preloads.length;i++) {
document.write("<img src="+ preloads[i].src +" height=1 width=1 style='position:absolute;left:-10;top:-10'>")
}

</script>I think that's how you do it, you will just have to apply it to your picture. After that, you can do two things. 1. Refer to the source of the picture as whatever[index].src or change to: for(var i=0;i<preloads.length;i++) {
document.write("<img src="+ preloads[i].src +" height=1 width=1 style='position:absolute;left:-10;top:-10'>")
preloads[i] = preloads[i].src
}Therefore, replacing the image with the new one. If this doesn't work, you could use: for(var i=0;i<preloads.length;i++) {
document.write("<img src="+ preloads[i].src +" height=1 width=1 style='position:absolute;left:-10;top:-10'>")
var theSrc = preloads[i].src
delete preloads[i]
preloads[i] = theSrc
}That should work the same!

[sarsonuk]

Thanks for the info, I intend to do something like this in the future when I have my interface sorted out to conserve bandwidth
Pete

[steelersfan88]

Note that this should not be done in the onload event, as it will overwrite the information on the page. This should be the script that appears right afvter the <title> tags in the HTML document.

NOTE: The above scripts are now tested for typos, etc. and do work fine, no edits required!

[suzie-q]

I can't have the script in the head of the html, because it is being used within another web page and I'm only allowed to insert javascript like I have, I can't put html head or body tags in my html it's already in place, I can only add to existing html.

And the only way I can usually get javascript to work is inside of form tags. So could you show me how from my script to change it so it preloads the images is it possible or no?

[steelersfan88]

It does not have to be in the head section, but it will load the images qicker if it is, images before images on page; therefore page images are loaded after, not before.

The script I provided will do the work, you can also call this on an event, i.e. onload for the body tag. If so, you will have to add a <span id="pics"> </span> object to the page, and the style attribute, position:abolsute;top:-100;left:-100.

Then in the script i gave you, change document.write(...) to document.getElementById('pics').innerHTML += ...

[suzie-q]

I'm a real dummy at this could you look at my script and tell me exactly where and how I shoud place it and also is there any changes I need to make my buttons and auto/stop events work?

[steelersfan88]

do you have a link for me to look at, or are you posting the code?

I'm terribly sorry, but there are some great posters out there, but it is 12:00 midnight here on the East Coast, and I'm taking advantage of that and leaving! But post link/script asap.

[suzie-q]

That is the code I have posted above...

[sarsonuk]

I changed my code to use the code below so that it loaded the images into memory but it seems that it is still downloading everytime the slideshow goes around. Have I doen anything wrong here?
Pete

<head>
<script>
var preloads = new Array
preloads[0] = new Image()
preloads[0].src = "./images/LTXchaps.jpg"
preloads[1] = new Image()
preloads[1].src = "./images/PeteComp.jpg"
preloads[2] = new Image()
preloads[2].src = "./images/pete_dave2.jpg"
preloads[3] = new Image()
preloads[3].src = "./images/Peteski.jpg"

var specifyimage=new Array() //Your images
specifyimage[0]=preloads[0].src
specifyimage[1]=preloads[1].src
specifyimage[2]=preloads[2].src
specifyimage[3]=preloads[3].src
</script>
</head>

You can see the page at www.geocities.com/sarsonuk/travel.html

The images that are being loaded is the slideshow

[steelersfan88]

add loop in middle

[suzie-q]

Okay have I written this right?
<form>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var preloads = new Array
preloads[0] = new Image()
preloads[0].src = "http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME1]"
preloads[1] = new Image()
preloads[1].src = "http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME2]"
preloads[2] = new Image()
preloads[2].src = "http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME3]"
preloads[3] = new Image()
preloads[3].src = "http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME4]"

for(var i=0;i<preloads.length;i++) {
document.write("<img src="+ preloads[i].src +" height=1 width=1 style='position:absolute;left:-10;top:-10'>")
}

NewImg = new Array (
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME1]",
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME2]",
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME3]",
"http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME4]"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
// End -->
</script>
<img

src="http://members.sparedollar.com/[#SDUSER]/[#IMAGENAME1]"

name="slideshow" WIDTH="300" HEIGHT="327">
</p>
<div ALIGN="center">
<table>
<tr>


<td align="center">


<p ALIGN="center">


<a HREF="javascript:chgImg(-1)">


<img SRC="images/backspring.gif" BORDER="0"

WIDTH="186" HEIGHT="54"></a></td>


<td align="center"><b>


<a href="javascript:auto()">


<font COLOR="#715991">Auto/Stop</font></a></b></td>


<td align="center">


<a href="javascript:chgImg(1)">


<img SRC="images/nextspring.gif" BORDER="0"

WIDTH="186" HEIGHT="55"></a></td>
</tr>
</table></div>
<p>
<p>
</form>

[sarsonuk]

Steelersfan,

The code I'm using still seems to load the files from the net

I do the following

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pete Sarson Travel Page</title>
<script>
var preloads = new Array
preloads[0] = new Image()
preloads[0].src = "./images/LTXchaps.jpg"
preloads[1] = new Image()
preloads[1].src = "./images/PeteComp.jpg"
preloads[2] = new Image()
preloads[2].src = "./images/pete_dave2.jpg"
preloads[3] = new Image()
preloads[3].src = "./images/Peteski.jpg"

for(var i=0;i<preloads.length;i++) {
document.write("<img src="+ preloads[i].src +" height=1 width=1 style='position:absolute;left:-10;top:-10'>")
preloads[i] = preloads[i].src
}

</script>

</head>

<body bgcolor="#FF9933" onload="javascript:{if(parent.frames[0]&&parent.frames['menuFrame'].Go)parent.frames['menuFrame'].Go()}">
<table height = "800" width="769" border="0" cellspacing="0" cellpadding="0">
<!--DWLayoutTable-->
<tr>
<td width="1" height="19">&nbsp;</td>
<td width="38">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="295">&nbsp;</td>
<td width="45">&nbsp;</td>
<td width="12">&nbsp;</td>
<td width="62">&nbsp;</td>
<td width="254">&nbsp;</td>
<td width="40">&nbsp;</td>
<td width="12">&nbsp;</td>
</tr>
<tr>
<td height="238">&nbsp;</td>
<td colspan="4" align="center" valign="top"><script language="JavaScript1.1">

//Picture Cube slideshow - By Tony Foster III
//Modifications by JK
//Visit JavaScript Kit (http://javascriptkit.com) for script

var delay=3000 //3 seconds

//Counter for array
var count =1;

var cubeimage=new Array()
for (i=0;i<preloads.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=preloads[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
</script>

<img src="./images/LTXchaps.jpg" name="cube" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">

</td>
<td>&nbsp;</td>
<td colspan="2" align="left" valign="center"><font size="2" face="Georgia">When
I take leave from work I don't like to spend it sitting around the house
watching TV. <br>
I believe that it is a big world out there and with the invent of telecommunications
it's easy to be no longer curious about whats out there. <br>
When I have some free time I try to break this habit and just disappear
somewhere for a short period of time. <br>
This page is about where I have been and places I would still like to go.</font></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="38"></td>
<td></td>
<td colspan="2" align="center" valign="middle"><strong><font size="3" face="Geneva">Me at different stages of conciousness in my life</font></strong></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="22"></td>
<td></td>
<td>&nbsp;</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="182">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan = "6" align="left" valign="top"><font size="2" face="Georgia">
I have been to Greece on a number of occasions. I really enjoy looking at
the ancient sites especially Knossos in Crete that goes back to before 2000
bc. <br>
I have been to many cities around the world such as Paris, Copenhagen, Milan,
Lyon, Boston, Providence, New York, LA, San Diego, Nikosia and Singapore.<br>
I have also traveled around the UK to places such as Liverpool, Middlesborough,
Edinburgh, Glasgow, Bath, Sailsbury, Portsmouth and Worthing.<br>
My favorite place in the whole world is Castleton in Derbyshire with Agios
Nikolas coming a close second in Crete,Greece.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="189">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align="left" valign="top"><font size="2" face="Georgia"> <p>I have moved
to Taiwan which is in South East Asia and so I'll be using this as a launching
pad to certain areas like :-</p>
<li>Thailand</li>
<li>Vietnam</li>
<li>China </li>
<li>Hong Kong</li></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td valign="top"><font size="2" face="Georgia"> <p>Places I intend to go to
sometime in the future :-</p>
<li>Hungary</li>
<li>Poland</li>
<li>Czech Republic </li>
<li>Egypt</li>
<li>Hawaii</li></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="126"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</body>
</html>

[steelersfan88]

you don't have special tags to refuse caching do you, here is a link on the topic: preload images (http://www.pageresource.com/jscript/jpreload.htm) .