在顯示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'); 
});