preloading background image on homepage

Question

I have a homepage that contains a huge amount of php code to populate the divs (including newsletter sign up with validation, content from a mysql database and various static images). The whole page is built on top of a background cross fade javascript.

It all works great and looks good.....however - when loading the page, the last "div" to appear is the background image - creating effectively a large "white space" until all the divs have loaded up and the background image is rendered.

Is there a method to load the first background image before anything else so that the user is not left with this blank space when navigating to the site?

I have seen in using rollover images, the rollover version can be preloaded in the script - would this be the best method to adopt when seeking such a solution?

Any help or advice much appreciated - happy to display code if required - just didnt think it would be too helpful given the amount there is in my script!!

Thanks JD

Answer 1

I think your problem is the order in which the images are loaded.

If your background image is loaded after all the other elements, make sure that your background image is loaded as soon as possible. If your background image is a div with the CSS property background-image:url(myimage.png), include the CSS file in the head tag.

Also, you can save your background image as a png interlaced. (In photoshop: save for web and devices > png24 > tick interlaced). This way, the image will quickly apear with a poor quality, and will improve as the data is transfered to your browser.

If you want to control the image loading with jQuery, look at this question: Preloading images with jQuery. But I doubt this will be usefull for you, as your problem is the order in which elements are loaded.

Answer 2

Have you tried preloading the image with JS?

Something like this:

<script type="text/javascript">
    bg = new Image();
    bg.src="background.png";
</script>

Answer 3

Separate the http requests.

So your page remains a page with the background image, and with only few elements.

With javascript make ajax request that load content of the page, and hook this ajax functions to $(document).ready() function (if you use jquery, otherwise you can use window.load function), so the content of page will be loaded just after the page has been loaded.

Answer 4

You can also consider using a client side cache file as specified by HTML5.
This does not completely solve as the first time the user enters your site he has to wait for images to be loaded, but can give you significant performance boost for next times the same user will come back.
Look here for more info.

Answer 5

u didnt specify u used jquery or not..

if jquery call Image.load function . in callback of that use all js , so that js called after loading of that image..

Answer 6

if you want to do this without using any JS you can include a div or img tag as the first item below body in your page then set that img tag style to display:none. It will load the image first so when you try to use it later it should be loaded and ready to display.