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

<强> 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 2

您可以通过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');
});

Answer 3

你可以使用插件，它是砌体插件的一部分：

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

Answer 4

我为预加载背景所做的工作（可能不是最佳解决方案）是将我用作背景的图像插入到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;"）

这种方法似乎没有问题。

在显示div之前加载CSS BG Image

4 个答案: