シングルイメージJqueryプリローダー

開発中のWebサイトでかなり大きな背景イメージを使用しています。現在、背景色が読み込まれ、画像の読み込みが完了すると、読み込まれます。それは完璧です。しかし、私はプリローダーのGIFは背景画像が読み込まれるまで回転し、その後、フェードイン効果を実現しようとしています。現在、ここに（すべてで働いイマイチ）私のjQueryのですシングルイメージJqueryプリローダー

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

このありえないが、私が欲しいものをやって - 背景色を表示し、ローダーをspan.loaderに表示します。ボディーの背景イメージがロードされたら、フェードイン（ローダーの上かローダーを隠すか）したい。何か案は？それを解剖多くの時間を費やすことなく、

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;}

出典

2011-03-05 JCHASE11

ボディーサイズの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-05 19:40:36 tvanfosson

私は本当にこのアイデアが好きです...しかし、bodyクラスが "loaded"クラスに割り当てられていなかったため、divクラスの露呈は0の不透明度に戻ってアニメーション化されていないようです。クラスが追加されない理由は何ですか？ – JCHASE11

なぜfadeOut（function（）{$（this）.remove（）}）をしないのですか？代わりに？ – Groovetrain

はい、問題はありませんが、ロードされている場合でも背景イメージはロードされていません。ロードされたクラスが割り当てられていないためです...もしあなたがアイデアを持っていなければ、一緒にjsfiddleを入れます – JCHASE11

、span.loader上display:noneはまさにそれをしないだろう。以下は、私の基本的なCSSですか！それを削除するとどうなりますか？

出典

2011-03-05 19:17:52 Steve

'フェードすることはありませんが、新しい背景画像が表示され、スピンナーを隠すことができます（これはおそらくまだここにload（）コールバックでスパンとフェードアウトしている可能性があります）。、あなたのCSSでhttp://jqueryfordesigners.com/image-loading/

を身体のルールを持って、スピナーが表示されます1、あなたが実際に背景画像を設定することを後から追加することができます：

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-05 19:24:18 Groovetrain

画像srcを背景画像URLに設定する必要があります。そうしないと、ロードイベントが発生しません。 – tvanfosson

@ tvanfosson right。編集された。ありがとう！ – Groovetrain

シングルイメージJqueryプリローダー

答えて

関連する問題