jqueryのショーローディングGIF

Question

を超える負荷がここでは

<div class="user_side"> 
<a href="#" class="button white" id="profile">Profile</a> 
<a href="#" class="button white" id="listing">Listing</a> 
</div> 

を持っているシンプルなコードがありますしながら、私たちは、コンテナがあります。

<div id="contentdiv" style="width: 760px; height: 440px;"> 
</div> 

とjQuery：

$("#profile").click(function(){ 
    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=profile"); 
}); 

$("#listing").click(function(){ 
    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=listing"); 
}); 

を我々メニューアイコンの1つがクリックされたときにcontainer内にloader.gifを表示する必要があります。それを行う最良の方法は何ですか？コンテナは透過的であり、デフォルトでは何も表示すべきでないことを指摘しましょう。

ありがとうございました。

Answer 1

loaderというCSSクラスを作成し、その要素を追加してから、loadをコンテナのコンテンツに追加してください。

$("#profile").click(function() { 
    var element = $("#contentdiv"); 

    element.html('<div class="loader"></div>'); 
    element.load("content.php?id=<? echo $uid; ?>&show=profile"); 
}); 

他の方法は、display: none;とyoutはコード内のローダのdivを作成し、ローダーを再利用するshow()とhide()を使用することです。このように：

$("#profile").click(function() { 
    var loader = $(".loader").show(); 

    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=profile", function() { 
     loader.hide(); 
    }); 
}); 

Answer 2

負荷機能のコンテンツとコールバック機能にimg loader imgを追加することがあります。ロードが終了すると、コールバック関数が実行されます。

<div id="contentdiv" style="width: 760px; height: 440px;"> 
    <img id="loader" src="load.gif"> 
</div> 

$("#profile").click(function(){ 
    $("#loader").show(); 
    $("#contentdiv").load("content.php?id=<? echo $uid;?>&show=profile", function() { 
     $("#loader").hide(); 
    }); 
});