ローダーが特定のdivを待つようにする方法

Question

私はこの小さなもの（コード）を自分のサイトのローダーアニメーションに使用していましたが、フェードアウトする前にいくつかの特定のdiv要素しか待たないようにすることは可能でしょうか。今度はサイト全体が表示されるまで待っていますが、サイトの上部に表示されているdivだけを待って、それをより速くするようにしたいと思います。

$(window).load(function() { 
    $('.loader').fadeOut(250); 
}) 

<div class="loader"></div> 

.loader { 
position:fixed; 
width:100%; 
height:100%; 
top:0px; 
left:0px; 
z-index:9999; 
background-color:#000; 
background-image: url(images/loader.gif); 
backgourd-repeat:no-repeat; 
background-postition:50% 50%; 
} 

Answer 1

あなたが代わりにウィンドウ全体でそれを呼び出すのでは、特定のdivの上でjQueryのロードイベントを使用することができ

：このうち スニペット

$("#your-div").load(function() { 
 
    $('.loader').fadeOut(250); 
 
});

https://api.jquery.com/load-event/

Answer 2

チェック

$("#wait").ready(function(){ 
 
    $('.loder').fadeOut(250); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="wait"><p>this is a div</p></div> 
 

 
<div class="loder">Some Content</div>

Answer 3

ページが実際にロードされる前に、それはロードのアイコンを持って、それを削除するには多くの意味を作るのか？ユーザーには、ページがまだロードされている間、ページが準備ができているという誤った印象を与えます。私はこれがお勧めだとは思わない。妥協案として、jQueryの.ready()メソッドを使用してローダーを削除することをお勧めします。ハンドラは、DOMの準備が整うとすぐに実行されますが、イメージなどのアセットがロードされる前に実行されます。

$(function() { 
 
    // Handler for .ready() called. 
 
    $('.loader').remove(); 
 
});

.loader { 
 
position:fixed; 
 
width:100%; 
 
height:100%; 
 
top:0px; 
 
left:0px; 
 
z-index:9999; 
 
background-color:#000; 
 
background-image: url(images/loader.gif); 
 
backgourd-repeat:no-repeat; 
 
background-postition:50% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="loader"></div>

Answer 4

http://api.jquery.com/ready/

使うsetIntervalあなたは要素がDOMに追加された場合のは、200ミリ秒ごとを言わせて確認することができます。一度clearInterval()を使用して、チェックをオフにすることができ、あなたが追加されている：

var checkIfExists = setInterval(function() { 
    if ($('div').length) { 
    $('.loader').fadeOut(250); 
    clearInterval(checkIfExists); 
    } 
}, 200);