Question

I am designing a website for a client and am trying to figure out how to tell the current browser viewing the page to wait until the background image is fully loaded before it is displayed on the page. It is a large background image (bytes-wise) and would like it to load once loaded. I also want to do the exact same with the logo, but am stumped.

To be quite honest with all of you, I know very little JavaScript and jQuery, which is why I ask, please someone help me it would make the page a lot more attractive. The reason why I stated that above is because I know this may only be done in JavaScript.

Answer 1

What comes to mind without actually used or tested it is wrapping the image. I’ll use jQuery for the sample

<div class="loading"><img/></div>

CSS could be

.loading { display: inline-block; }
.ie6 .loading, .ie7 .loading { display: inline; } /* these could be set by http://www.modernizr.com/ */
.loading img {
     visibility: hidden;
     background: url('path/to/loading.gif') center center no-repeat transparent;
     vertical-align: bottom; /* or display: block; to kill the inline white space */
}

JavaScript (jQuery)

  $(function(){
    $('.loading img').load(function(){
         $(this).css('visibility','visible');
    });
   });