473,320 Members | 1,961 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Slow loading time for slideshow gallery

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
4 3711
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
"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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Stacey | last post by:
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...
4
by: CB US 77 | last post by:
I use a piece of javascript to create a photo gallery slideshow. The slideshow part works great, but I would like to add captions to each picture. If you want to see the html, send me an email to...
7
by: Charles | last post by:
I have Visual Studio 6.0 stand-alone (with C++) and as part of Compaq Visual Fortran 6.6c. I am moving my development from a Win 98 SE machine w/2x 10 Gb HDD (each w/ 1Gb free), 768 Mb RAM to a...
6
by: B B | last post by:
Okay, here is what's happening: I have a reasonably fast laptop (1.4 GHz Mobile M, so comparable to 2.5GHz P4) doing .net development. Running Windows XP pro, SP2 IIS is installed and running...
6
by: Ivan Bútora | last post by:
I have recently looked at http://alistapart.com/articles/imagegallery to implement a simple picture gallery on a webpage that I'm working on. Everything works fine; however, I have one question....
1
by: agatha.life | last post by:
I did a javascript for the loading of images (I didn't want to have the images loaded in "on loading" because they are too many). The website is for a model and if you look at the codeof pages (...
2
by: rdc.arch | last post by:
Hello all - let me start by saying i am an architetural designer, not a web designer - but my wife is just starting a business and we can not fford to hire a website designer so i have created...
5
by: =?Utf-8?B?V2FubmFiZQ==?= | last post by:
We have a page that is loading very slow. There is not a lot of data, not a lot of users are connected at the same time and the page does not produce an error, so I am not sure where to start to...
39
by: cm_gui | last post by:
Python is slow. Almost all of the web applications written in Python are slow. Zope/Plone is slow, sloow, so very slooow. Even Google Apps is not faster. Neither is Youtube. Facebook and...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.