1

我有一个不小的 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");
    });
 });
4

4 回答 4

2

CSS

#background-wrap {
    display: none;
}

JS

$(["path/bg.jpg"]).preload();
$('#background-wrap').fadeIn('slow');
$.fn.preload = function () {
  this.each(function () {
    $('<img/>')[0].src = this;
  });
}
于 2012-09-04T20:36:44.553 回答
1

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

// 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');
});
于 2012-09-05T09:52:19.460 回答
0

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

这种方法似乎没有问题。

于 2012-09-10T20:32:38.917 回答
0

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

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

于 2012-09-04T20:29:28.160 回答