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

Slow loading time for slideshow gallery

P: n/a
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?
Should I load my slideshow into differerent windows? If so, don't I have the
same problem with my loading time?
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Use above posters xmlhttp methods and a timer.

It will load in the background.


"Adrian MacNair" <am**********@SPAMsympaticoME.ca> wrote in message
news:zO********************@news20.bellglobal.com. ..
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? Should I load my slideshow into differerent windows? If so, don't I have the same problem with my loading time?


Jul 23 '05 #2

P: n/a
"Adrian MacNair" <am**********@SPAMsympaticoME.ca> wrote in message
news:zO********************@news20.bellglobal.com. ..
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?
Should I load my slideshow into differerent windows? If so, don't I
have the
same problem with my loading time?


An image pre-load script shouldn't cause the page to stop loading unless
you've specifically coded it to suppress display: block; on a <div> that
wraps the entire page or something.

<head>
<script type="text/javascript">
var myImages = [];
for (var ii = 0; ii < 63; ++ii)
{
var myImage = new Image();
myImage.src = 'yourImageName' + ii + '.jpg';
myImages.push(myImage);
}
</script>
</head>

The user agent will (should) queue up 63 GET requests for the images and
continue loading and caching them while it parses and renders the rest
of the page. There's still no guarantee that image 62 will be available
if the user jumps straight to it as soon as the page is finished
loading, but if the user accesses the images sequentially, there is a
pretty good chance that each image will have been downloaded and cached
before it is required.

Although I'm not sure how many dial-up users would be happy with you
tying up their bandwidth to download 6MB of images, some of which they
may never look at.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #3

P: n/a
Grant Wagner wrote:
"Adrian MacNair" <am**********@SPAMsympaticoME.ca> wrote [...]
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?
Should I load my slideshow into differerent windows? If so, don't I
have the
same problem with my loading time?

Please, do something about the way your "newsreader" (line-)breaks quotes.
An image pre-load script shouldn't cause the page to stop loading
unless you've specifically coded it to suppress display: block;
on a <div> that wraps the entire page or something.
Images are _inline_ elements and newly created Image objects are
not displayed. What exactly are you trying to suggest here? It
does not matter what stylesheet has been used; in fact, the way
of "preloading" rather matters.
<head>
<script type="text/javascript">
var myImages = [];
for (var ii = 0; ii < 63; ++ii)
{
var myImage = new Image();
myImage.src = 'yourImageName' + ii + '.jpg';
myImages.push(myImage);
}
</script>
</head>

The user agent will (should) queue up 63 GET requests for the images and
continue loading and caching them while it parses and renders the rest
of the page. [...]
No, control flow will not be taken from the script engine until it is
finished. Since it works single-threaded and there is no guarantee that
assignments to properties of host objects like Image objects result in
asynchronous operation, it is likely that it locks up the
parsing-and-rendering process until completed. That is, this approach
will rather slow down this for the user than speeding it up since the
user will not see the loading in progress in contrast to sequential
resource display.

So, instead of such a script, the `window' or `document' object's, or `body'
element's onload event handler should be used since it has been observed
that this event handler can fire before all images are loaded. But still,
such "preloading" only works if the cache settings are appropriate; since
the programmer does not have control over it, it is merely of academical
interest to take it into account. More, large images will quickly fill up
the cache and have to make room for more images and so caching will have
little effect on loading speed for those.
There's still no guarantee that image 62 will be available
if the user jumps straight to it as soon as the page is finished
loading, but if the user accesses the images sequentially, there
is a pretty good chance that each image will have been downloaded
and cached before it is required.
The chance that the user leaves frustrated before loading has finished
since he does not notice any progress is considerably higher than that.
Although I'm not sure how many dial-up users would be happy with you
tying up their bandwidth to download 6MB of images, some of which they
may never look at.


Indeed, an image gallery should be implemented with thumbnails so that
larger images are only displayed if the user wishes them to be displayed.
PointedEars
Jul 23 '05 #4

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

Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.