Preloading images

[Terry]

Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.

I am sure there are other methods as well. I know in years gone by I
used to see the images stored in an array (javascript).

Any suggestions?

Thanks in advance,
Terry

 

[Darko]

Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.

I am sure there are other methods as well. I know in years gone by I
used to see the images stored in an array (javascript).

Any suggestions?

Thanks in advance,
Terry

I'm pretty sure it's the best way to store them in an array. You don't
really want the browser to parse HTML code in vain? Although the user
won't see them, the browser will have to parse the code and display it
somewhere. They also can get in the way when designing the flow of
other elements.

 

[RobG]

Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.

That technique is not dependent on javascript to load the images and
is appropriate for circustances where that is required. It is not
appropriate for other cases (see below).

I am sure there are other methods as well. I know in years gone by I
used to see the images stored in an array (javascript).

Any suggestions?

It depends. If the images will only be shown using script, it seems
reasonable to load them using script. If scripting is not available,
then the images won't be loaded and the user won't have wasted
bandwidth downloading them.

On the other hand, if you have a fall-back mechanism and want the
images loaded regardless of whether scripting is available or not, use
the suggested div method to ensure that they are loaded and cached by
the browser.

But don't get carried away pre-loading a swag of images that the user
may never want to view whether they have scripting available or not.

 

[s0lnic]

I was wondering what do people consider the best way to preload the
images to be used within the show.

Just use Image object in JavaScript and store loaded images in Array, this
will do the trick.

I saw a technique where the images were stored in 1 px by 1px divs
with overflow set to hidden.

Nonsense

 

[rf]

Hi folks.

I am about to embark on creating a slideshow using javascript and css.

I was wondering what do people consider the best way to preload the
images to be used within the show.

How many images?

Why do you want to download them? To save on transition time between
"slides"?

Don't forget that by preloading them you are lumping every transition time
into the load time of the home page (unless you pull some tricky javascript
skulduggery). That is, if you have 100 images in your show and each takes
two seconds to download then your home page will then take 200 seconds to
appear (or maybe 100). Is this what you really want? Dial up users will be
long gone.

And what if I only want to look at a few images? You are forcing me to
download the entire 5 megabytes of your slide show.