473,574 Members | 2,309 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 3733
Use above posters xmlhttp methods and a timer.

It will load in the background.


"Adrian MacNair" <am**********@S PAMsympaticoME. ca> wrote in message
news:zO******** ************@ne ws20.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**********@S PAMsympaticoME. ca> wrote in message
news:zO******** ************@ne ws20.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(m yImage);
}
</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*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq
Jul 23 '05 #3
Grant Wagner wrote:
"Adrian MacNair" <am**********@S PAMsympaticoME. 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(m yImage);
}
</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 makePreloadImag e( imgSrc ) {
var x = new Image();
x.onload = function ( ) {
// figure out which is the next image using this.src
// or whatever is appropriate
makePreloadImag e( 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
3373
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 six slideshows (rather than try to articulate, have a look here): http://www.slack.net/~stacey/stestbed/homejs.jsp Clicking any of the six...
4
2724
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 usb15@cox.net. Any help would be great.
7
1713
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 3.2 MHz Win XP Pro machine w/147 Gb HDD (121 Gb free) and 2 Gb RAM. Loading a particular project with Fortran code only with about 80 files and...
6
8566
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 fine All SQL Servers I am referring to share a small (10 computers or so) LAN with a 100MB Switch. No other computers on the LAN exhibit this...
6
2558
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. When I click on a thumbnail, a JavaScript function is executed to change the picture in the main view. Since some of these images are around 300KB,...
1
3401
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 ( for ex. http://www.agathamoon.com/gallery_48_eng.htm ) using explorer or firefox it works, with safari it doesn't! :( The idea is to have the...
2
2061
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 www.artstudioshanti.com - it is more of a portfolio than an online store, but eventually my need to become an online store - also, as she adds more...
5
2805
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 look for why it is slowing down. I thought about the DB first and added NOLOCK to a couple of stored procedures that were being run, but with no...
39
2830
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 Wikipedia (Mediawiki), written in PHP, are so much faster than Python. Okay, they probably use caching or some code compilation -- but Google Apps...
0
7801
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7719
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8044
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8229
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8096
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6450
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3739
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2238
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
1055
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.