469,312 Members | 2,437 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,312 developers. It's quick & easy.

"Loading" Graphic (Preload issue)

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):


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

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)?


-- 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 3144
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
plImages = filenames;
pointer = -1;
preloader = window.setTimeout("checkPreload();", 500);

function checkPreload() {
// need to load next?
if (pointer<0 || plImages[pointer].complete) {
// increment pointer
// loaded all images?
if (pointer>=plImages.length) {
// call complete
} else {
// create other preloading image
img = new Image();
img.src = plImages[pointer]
plImages[pointer] = img;
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 zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.