image preload issue

[russ801]

I am trying to preload some images to my page. But after reviewing the threads here and the code, I don't think I am doing it right. I think that I am actually loading the images several times.

var r=0
var imgno=0

// create the array to load the full size images , thumbnails and composite pages if applicable
var photos = new Array(
new Array("Headshots/MarH0022V.jpg","Headshots/MarH0022T.jpg","Pages/CP_MarH I.html"),
new Array("Headshots/NicM0421V.jpg","Headshots/NicM0421T.jpg","Pages/CP_NicM.html"),
new Array("Headshots/DouB0296V.jpg","Headshots/DouB0296T.jpg","Pages/CP_DouB I.html"),
new Array("Headshots/SteP0004V.jpg","Headshots/SteP0004T.jpg","Pages/CP_SteP.html"),
new Array("Headshots/DiaJ0468V.jpg","Headshots/DiaJ0468T.jpg","Pages/CP_DiaJ.html"),
new Array("People/Fash0070VBW.jpg","People/Fash0070TBW.jpg",null)
);


// Preload the images
function setImg() {
var imgAry = new Array();
var imgtn = new Array();
// for each row
for(x=0; x<photos.length; x++) {
//imgAry[x] = new Image();//full size images
imgtn[x] = new Image();//thumnails
//imgAry[x].src = photos[x][0];
imgtn[x].src = photos[x][1];
}



document['bigimg'].src = photos[0][0];
document['tn0'].src = photos[0][1];
document['tn1'].src = photos[1][1];
document['tn2'].src = photos[2][1];
document['tn3'].src = photos[3][1];
document['tn4'].src = photos[4][1];
document['tn5'].src = photos[5][1];
}

function next() {
window.location="TVHS02.html";
}

// image swap function
function Blowup(r) {
document['bigimg'].src = photos[r][0];
imgno=r;
composite ()
}

any suggestions?

Russ

[Nedals]

No, you are not loading several times. You are, in fact, not loading some of the images. (loose the .HTML and the null).
and put these in a seperate array
(Not tested, but this should do it)
// Preload the images
function setImg() {
var imgAry = new Array();
// for each row
for(x=0; x<photos.length; x++) {
// for each image in a row
for (y=0; y<photos[x].length; y++)
imgAry[x][y] = new Image(); //thumnails
imgAry[x][y].src = photos[x][y];
}
}
// You don't need this. You simply define the initial image in your HTML
document['bigimg'].src = photos[0][0];
document['tn0'].src = photos[0][1];
document['tn1'].src = photos[1][1];
document['tn2'].src = photos[2][1];
document['tn3'].src = photos[3][1];
document['tn4'].src = photos[4][1];
document['tn5'].src = photos[5][1];
}

[russ801]

After soem thought I have concluded that I pro asked the wrong question.

Your preload script simplifies the image preload but I think that may actually be my problem. I want to load the thumbnails display them and then preload the images. As it stands the user sees a blank page for too long as all the images load. Makes for great response time once they are loaded but that initial delay is unacceptable.

Id I am not double loading the images then I need to load the images differently.

Russ

BTW the third element (.html) in the array is used by a function I did not include

And the population of the array is needed for my cunning plan. all the images in the body are simply placeholders which I populate from the array. I ahve about 30 pagges similar to this and it makes maintenace much simpler. (now if I could fix that performance problem)

[SPD]

Maybe I understood your question.

Try to put the thumbnails in your .html file normally, then, below them, place the preload code:

http://www.superprodesign.com/spd/scripts/images/preload1.html

The example is as follows:

<img src="thumb1.jpg"><img src="thumb2.jpg"><img src="thumb3.jpg"><img src="thumb4.jpg">

Afterwards copy & paste below that the preload code you got from the link I showed you.

SPD ;)