1

開発中の Web サイトでかなり大きな背景画像を使用しています。現在、背景色が読み込まれ、画像の読み込みが完了すると読み込まれます。それはまったく問題ありません。ただし、背景画像が読み込まれるまでプリローダーgifが回転し、フェードインする効果を実現しようとしています。現在、ここに私のJqueryがあります(まったく機能していません)

$(document).ready(function(){
    $('span.loader').show();       
    $("body").css('background-image','url(images/bg.jpg)').ready(function(){
        $("span.loader").hide();
   });
});

これは私が望んでいることではありません - ロード時に背景色を表示し、 内にローダーを表示したいのですspan.loader。本体の背景画像の読み込みが完了したら、それをフェードインさせたい (ローダーの上に表示するか、ローダーを非表示にする)。何か案は？以下は私の基本的なcssです：

body{background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb; font-family:'Arvo'; sans-serif;}
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); display:none;}
4

3 に答える 3

2

「フェード」しませんが、新しい背景画像を表示し、スピナーを非表示にします (おそらくスパンを入れて、ここで load() コールバックでフェードアウトできます。このコードは、私が見つけたものから改作されましたここにあなたのために: http://jqueryfordesigners.com/image-loading/

css には、スピナーを表示し、実際に背景画像を設定する後で追加できる本文のルールがあります。

body.image-loading {background-image: url('images/spinner.gif'); }
body.image-loaded { background-image: url('images/bg.jpg'); }

次にjQueryで：

$(function() {
  $('body').addClass('image-loading');

  var img = new Image();
  $(img).load(function () {
    $(this).hide();
    $('body').removeClass('image-loading')
      .addClass('image-loaded');
  })
  .attr('src', 'images/bg.jpg');;
});
于 2011-03-05T19:24:18.210 に答える
0

ボディサイズのDIVを（ボディではなく）スピナーで背景色に設定し、ボディの背景を追加し、完全に透明になるまでDIVの透明度をゆっくりと上げてから、削除した場合はどうなりますか。このDIVのz-indexは本文より高く設定する必要がありますが、ページのコンテンツより低く設定する必要があります。

次に、@ Groovetrainのトリックを使用して、画像が読み込まれていることを確認し、公開をトリガーできます。

body{background-color: #e6f8bb; font-family:'Arvo'; sans-serif;}
body.loaded {background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb;}
div.reveal{position: absolute; height: 100%; width: 100%; z-index: 1; background-color: #e5f8bb;};
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); }
#content { z-index: 2 }

<script type="text/javascript">
    $(function() {
       var img = new Image();
       $(img).hide().load(function() {
           $('body').addClass('loaded');
           $('.reveal').animate({opacity:0}, function() {
               $(this).remove();
           });
       });
       img.src = "/images/bg.jpg";
    });
</script>    

<body>
<div class="reveal">
  <span class="loader">&nbsp;</span>
</div>
<div id="#content">
...
</div>
</body>
于 2011-03-05T19:40:36.823 に答える
0

それを分析するのに多くの時間を費やすことなく、display:noneon span.loaderはまさにそれをしませんか？それを削除するとどうなりますか？

于 2011-03-05T19:17:52.213 に答える