[Javascript] DOM Background Image Slideshow

[Paul Novitski]

At 06:29 AM 4/9/2005, Harvey A. Ramer wrote:
>Is it possible with the DOM to flip through images on a background. For
>example, I want to show products on a background image and flip through them
>to improve the stickiness of my site. I don't want it on the foreground
>because I don't want to slow page load.

Harvey,

Every image on your page will contribute to download time regardless of 
whether it's in the foreground or the background: it all still has to be 
transmitted from the server to the client.  All you can control is the 
order in which items are downloaded, and whether an item is downloaded with 
the page initially or only on demand later on.

In my personal experience, it appears that background images specified in 
external stylesheets are downloaded last, probably because the browsers 
process the stylesheets after the html.  You've undoubtedly noticed many 
sites in which the body background image appears late in the download.  You 
can get around this by forcing download of a background image at the very 
beginning with pre-load logic: setting the src of an img object immediately 
and not when window.onload() fires.  Then that image will already be in 
cache and will appear instantly when the browser processes the css file.

Two ways to have an image slideshow (regardless of fore- or back-) are:

1) Produce a GIF with multiple pages (separate static images) animated with 
a time-delay between pages.  However, these paged GIFs tend to be heavy and 
last to download.

2) Use JavaScript to set a repeating timer, and each time the timer fires 
replace the src of a foreground image or the url() of a css background-image.

In order the get either of these techniques to show their slideshow while 
the rest of the page is downloading, you'll need to download all the 
slideshow images first with a preload.  What this will do is shift all the 
image download time to the beginning of the process, so the user may 
experience an exaggerated delay before the page begins to resolve.

Oh, here's another method:

3) Begin your HTML page with a series of foreground img tags, each 
positioned absolutely in the same spot on the page.  Because the image tags 
come first in the markup, they will begin downloading first and will arrive 
at the client before any object of same size or larger that appears later 
in the markup.  Each image will appear to replace the one that came 
before.  (Assuming the slideshow images are the same size, they will finish 
downloading in the same sequence they appear in the markup.)  Then on 
window.onload() you can use JavaScript to set a timer and toggle the 
z-index of the images to bring each one to the front in turn.

Paul