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.