Question

I have a CSS background image that is not small and unfortunately I have compressed it as much as possible in Photoshop. I have a loading div that hides the page from displaying until the page is loaded. However it will show the div before the CSS BG is loaded. How do I keep the script from firing until the CSS BG Image is loaded?

CSS:

#background-wrap{
   background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   /* Cover for IE 7/8 */
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
   -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
   /* End Cover for IE 7/8 */
   background-size: cover;
   background-color: transparent !important;
   position:fixed;
   top: 0;
   left: 0;
   width: 100%;
   height:100%;
   max-width:3000px;
   max-height:1500px;
   z-index:1;   
    }

HTML:

<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" style="width:32px;" class="center" src="/images/ajax-loader.gif" alt="Loading..." />
</div>
<div id="content-wrap" class="hide">
<div id="background-wrap">
    <div class="img-center" style="z-index:9999;"><img  src="img.png" />
    </div>
    <p>&nbsp;</p>
 </div>
 </div>

JS:

var $j = jQuery.noConflict();
   $j(window).load(function() {
        $j('#loading').fadeOut('slow', function() {
  $j("#content-wrap").fadeIn("slow");
    });
 });

Answer 1

What I have done to pre-load the background (thought maybe not the best solution) was to insert the image I am using as a background into the html code as so:

  <div id="img-load" class="hide">
    <img src="path.jpg" />
  </div>
<!-- Rest of Page Code -->

The use the following script:

var $j = jQuery.noConflict();
   $j(window).load(function() {
        $j('#loading').fadeOut('slow', function() {
  $j("#content-wrap").fadeIn("slow");
   }); 
});

(Note: .hide = style="display:none;")

This method seems to work without issue.