Background image loading slowly

Question

I have a site utilizing a background image that resizes to the window's size. This is achieved by placing an <img> in the body, and some custom CSS ( Technique #2 ).

I use a simple conditional statement in the header to determine which image to display:

<?php if (is_single(array(11,24,26,28,30,36))) : ?>
    <img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg" class="bg" />
<?php else : ?>
    <img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg" class="bg" />
<?php endif; ?>

My problem is, the image reloads every time I refresh or navigate somewhere else. This results in a flash of white. See the website here!

I reckon the php script calls the image each time, resulting in the 'flash'.

Any way around this? Ways to make the image cache and not reload each time?

EDIT

I believe the issue is a FOUC problem. Will flash the background color (default white) when refreshed, causing flashes. FOUC fixes don't seem to help.

Issue occurs even with PHP conditional statement removed. Issue occurs when <img> is changed to background-image.

Answer 1

I noticed this question a while ago but hoped you'd get an answer that worked for you.

Seeing as nothing has worked for you so far, I have one piece of advice: When you save your .jpg files (the big background images), you might want to save them in "progressive" format if possible.

http://en.wikipedia.org/wiki/JPEG

There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, progressive JPEGs are not as widely supported, and even some software which does support them (such as some versions of Internet Explorer) only displays the image once it has been completely downloaded.

Instead of loading the image in a line from top to bottom, it will instead "progressively" become clearer and less pixelated, so you won't see the FOUC as much with the background visible behind it.

Besides this, make sure you provide a background color that won't heavily contrast the image, and try to compress the file size as much as your design can withstand.