How to prevent the white 'flash' on page load created by background image loading delay?

Question

The problem is, on most sites on the web, there are background images. They take time to load. Ordinarily, it wouldn't be a problem if the images were optimized, and small enough. However, on some of my sites, the javascript files find their way to load before anything else on the page, even though they're in the footer! This creates a white "flash" before the background image loads. Why is my javascript loading first before anything else? I'm having this problem on many sites, and I see it everywhere. Here's the site I'm currently working on:

http://www.bridgecitymedical.com/wordpress/

Thanks!

tl;dr How can I defer loading of javascript on my websites so that the background image loads before anything else, thus preventing that white "flash" before the browser finishes downloading the image.

Answer 1

Don't delay loading parts of your site - what if the background image were to have an error in transmission and never arrive? Your scripts would never load.

Instead, if you really dislike the "white" flash, set the background color of the document to a more pleasing color, more in line with your background image. You can do so in the same css style:

body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

It's simple, has virtually no cost, won't break, and won't delay things from downloading unnecessarily. It looks like you're already doing something like this - I wouldn't change it. I don't think anybody has the expectation that your site look a certain way before it loads.