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

Question

我有一个不小的CSS背景图像，不幸的是我已经尽可能在Photoshop中对其进行了压缩。我有一个加载div，隐藏页面显示，直到页面加载。但是它会在加载CSS BG之前显示div。如何保持脚本不被触发，直到加载了CSS BG Image？

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

我所做的预加载背景（想，也许不是最好的溶液）插入我使用作为背景到HTML代码，以使影像：

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

使用下面的脚本：

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

（注：.hide = style="display:none;"）

这种方法似乎没有问题的工作。

Answer 2

您可以使用插件，它是砖石插件的一部分：

https://github.com/desandro/masonry/blob/master/jquery.masonry.js#L390-446

Answer 3

CSS

#background-wrap { 
    display: none; 
} 

JS

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

Answer 4

您可以通过JavaScript预加载图像，然后等待加载事件将图像src添加到DIV#background-wrap。此外，您还需要删除CSS中对bg.jpg的所有引用。

// Creates an empty image 
var $img = $('<img>'), 
    src = 'bg.jpg'; 
// Adds a listener to the image on load event 
$img.load(function(e) 
{ 
    $('#background-wrap').css('background-image', 'url('+src+')') 
    .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')") 
    .css('-ms-filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')") 
    .fadeIn('slow'); 
}); 
// (pre)load the image 
$img.attr('src', src); 

或者你也可以使用jQuery插件imagesLoaded预加载一个或多个图像：

var src = 'bg.jpg'; 
$('<img>').attr('src', src).imagesLoaded(function($images, $proper, $broken) 
{ 
    $('#background-wrap').css('background-image', 'url('+src+')') 
    .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')") 
    .css('-ms-filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')") 
    .fadeIn('slow'); 
});