Adrian MacNair wrote:
Hi,
I created an image gallery which displays 63 images in a slideshow. The
problem is that the show was slow because each image loaded one at a time
during the show. No problem right? I just did a preload script. But then the
user has to sit for 5 minutes waiting for 63 images to download! My images
are about 640x480 and average 100kb.
Is this too much for one page to load?
Yes, in terms of impact to the user.
Should I load my slideshow into differerent windows?
No -- this will cause clutter and frustration and popup blockers will
cause compatibility issues.
If so, don't I have the same problem with my loading time?
Yes, you would.
I'll assume that your gallery here does not implement thumbnails and
that your design doesn't call for it to do so. There's nothing wrong
with this.
What I'd suggest is this:
Image objects have a Load event. You can take advantage of this to
sequentially load your images one at a time by implementing two
functions:
function makePreloadImage( imgSrc ) {
var x = new Image();
x.onload = function ( ) {
// figure out which is the next image using this.src
// or whatever is appropriate
makePreloadImage( nextImage );
}
x.src = 'http://url.to/your.img';
}
If you want to have it pre-load four at a time, you can do this, but
you'll have to account for it in the section of logic that determines
which image is next to be preloaded.
Now, if someone chooses to skip ahead to image number 60, well... there
are some ways you can TRY to account for this, but then we're looking
at a heck of a lot more code, and it cannot be made bulletproof. I
don't recommend it, because I don't think it can be made to work very
well.
You may also consider randomly choosing which image to pre-load next,
instead of doing it sequentially.