By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,165 Members | 1,916 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,165 IT Pros & Developers. It's quick & easy.

"Loading" Graphic (Preload issue)

P: n/a
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...
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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.

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.