471,595 Members | 1,561 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,595 software developers and data experts.

"Loading" Graphic (Preload issue)

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
1 3214
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.

Similar topics

1 post views Thread by Stimp | last post: by
3 posts views Thread by Stimp | last post: by
2 posts views Thread by dana lees | last post: by
3 posts views Thread by bdog4 | last post: by
reply views Thread by Terry Tang | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.