javascript - 在显示 div 之前加载 CSS BG 图像

Question

我有一个不小的 CSS 背景图像，不幸的是我已经在 Photoshop 中尽可能地压缩了它。我有一个加载 div，它在加载页面之前隐藏页面不显示。但是它会在加载 CSS BG 之前显示 div。如何在加载 CSS BG 图像之前阻止脚本触发？

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

CSS

#background-wrap {
    display: none;
}

JS

$(["path/bg.jpg"]).preload();
$('#background-wrap').fadeIn('slow');
$.fn.preload = function () {
  this.each(function () {
    $('<img/>')[0].src = this;
  });
}