1

私は小さくないCSS背景画像を持っていますが、残念ながらPhotoshopで可能な限り圧縮しました。ページが読み込まれるまでページが表示されないようにする読み込みdivがあります。ただし、CSSBGがロードされる前に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を介して画像をプリロードしてから、loadイベントを待って画像srcをに追加できDIV#background-wrapます。bg.jpgまた、CSS内のへのすべての参照を削除する必要があります。

// 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を使用して、 1つ以上の画像をプリロードできます。

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

組積造プラグインの一部であるプラグインを使用できます。

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

于 2012-09-04T20:29:28.160 に答える
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 に答える