Making an image download before the rest of the page does?

I do agree with Lasse Reichstein Nielsen that if the page is useless without
the background then redesign it.

On the other hand, why don't you look at the problem from the other
way. How can I hide the contents until the picture(s) are loaded ?

Use the following statement to hide everything inside a DIV:
document.getElementById("YourDivID").style.display = "none";

Use the following statement to show everything inside a DIV:
document.getElementById("YourDivID").style.display = "";


"Lasse Reichstein Nielsen" <lrn@hotpop.com> wrote in message
news:8yq6lk1m.fsf@hotpop.com...[color=blue]
> "Keiron Waites" <webmaster@-NOSPAM-sharemonkey.com> writes:
>[color=green]
> > Is there any JavaScript that can force the download of an image or a[/color][/color]
list of[color=blue][color=green]
> > images before the HTML, or any other images are downloaded?[/color]
>
> Not before all the HTML (the script has to come from somewhere), but
> you can start downloading simultaneously (up to the browsers limit of
> simultaneous connections).
>
> <script type="text/javascript">
>
> function preloadImg(src) {
> var dummy = new Image();
> dummy.src=src;
> }
> preloadImg("background.png");
> preloadImg("img1.png");
> preloadImg("img2.png");
> preloadImg("img3.png");
>
> </script>
>[color=green]
> > This is necessary so I can force the background image to download
> > before anything else does.[/color]
>
> This will not pause the HTML while you load the background.
>
> If your page is unusable unless the background image is loaded,
> then you should redesing your page.
>
> /L
> --
> Lasse Reichstein Nielsen - Join Bytes!
> Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
> 'Faith without judgement merely degrades the spirit divine.'[/color]

If you are willing to use a preload page, you can load all of the
images before your page starts. Dynamic Drive at www.dynamicdrive.com
has ready-made preload pages. You can use most of them for free
provided you leave the Dynamic Drive credits intact in comments in the
script. They are easy to use. You have to set up two 1 x 1 px solid
color gifs for the colors of the status bar. You can position the
loading status bar as desired. You put in the URL of your main page to
which you automatically transfer as soon as preloading is completed.
You must fill in an array of URLs for your images. If your page takes
a bit of time to load you can include some text on the preload page to
keep the viewer busy while preloading. Also you can tell a viewer to
reload and/or turn on JS if there is no motion of the preload bar. A
preload page may not be right for every application, but it is a nice
trick to have at hand for many pages that otherwise produce problems.