"Loading" Graphic (Preload issue)

[Stacey]

Hi,
I'm hoping for a bit of advise-- I have a (relatively, from the
point-of-view of this dilettante) complex script that attempts to preload
certain images in order to trigger one of a series of six slideshows
(rather than try to articulate, have a look here):

http://www.slack.net/~stacey/stestbed/homejs.jsp

Clicking any of the six blocks of text along the sides will begin a loop
of the corresponding slideshow.

Problem is, of course, there's a lot of loading here (blame the boss). It
seems to run fine on broadband, but, of course, dialup users are getting
broken images all over the place.

The "loading" graphics before the slideshow are really a tease-- just four
seconds of extra time to load the remaining images (not enough for
dialup).

My question is twofold:

-- Any tips, pointers, tutorials on if it's possible to make those
"loading" graphics functional loading graphics (e.g. rather than part of
the array, they stay put until the images I want are actually loaded)?

-or-

-- Any advise on how to properly preload images? (I've read that the
myriad examples we see of preload functions by way of calling the image is
a bit of a misnomer).

Any suggestions at all would be more than appreciated...

 

[Vincent van Beveren]

I coulnd't get your example to run, in Netscape it shows the document
source (mime-type problem in the server?) and in explorer it gives
errors. I can imagine that some people might not like the following
code because of my misuse of arrays.

var plImages;
var pointer = 0;
var preloader;

function preload(filenames) {
if (preloader==null) {
// cancel previous preloading
window.clearTimeout(preloader);
}
plImages = filenames;
pointer = -1;
preloader = window.setTimeout("checkPreload();", 500);
}

function checkPreload() {
// need to load next?
if (pointer<0 || plImages[pointer].complete) {
// increment pointer
pointer++;
// loaded all images?
if (pointer>=plImages.length) {
// call complete
preloadComplete();
return;
} else {
// create other preloading image
img = new Image();
img.src = plImages[pointer]
plImages[pointer] = img;
preloadProgress(pointer);
}
}
window.setTimeout("checkPreload();", 500);
}

function preloadComplete() {
// fill this in
}

function preloadProgress(imagesLoaded) {
// fill this in
// for example:
pg = document.getElementById("progress");
pg.innerText = imagesLoaded+" of 6 images loaded";
// or
progressBlock = document.getElementById("pImage"+imagesLoaded");
progressBlock.src = "fillblock.gif";
}

// call:
preload(['image1.gif', 'images2.jpg', 'etc.gif']);


once loaded preloadComplete is called. For every complete image
preloadProgress is called.