jQuery円滑なページ遷移プリローダー付き

Question

私は、私のウェブサイトのリンクを押すとdivコンテンツをフェードインするためにこのコードを使用しようとしますが、別のリンクを押すとフェードアウトして新しいコンテンツがフェードインします。ここで、この例を見ることができます：

http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

まあ、私はそれがロードされます前に、各ページの上部にアニメーションgifのプリローダーを配置する必要があります。誰かがjqueryコードを教えてくれますか？積載オーバーレイを追加する

$(document).ready(function() { 
    $("#content").css("display", "none"); 
    $("#content").fadeIn(1000); 
    $("a").click(function(event){ 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("#content").fadeOut(1000, redirectPage); 
    }); 
    function redirectPage() { 
     window.location = linkLocation; 
    } 
}); 

Answer 1

使用この..

コードコンテンツを交換し、フェードイン/アウトする 感謝。

$("a").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("#content").fadeOut(1000, redirectPage);  
    $("body").append("<div class='LoadingOverlay' />"); 
} 

次に、CSSを使用してレンダリング方法を制御します。

.LoadingOverlay 
{ 
    z-index:1000; 
    position:fixed; 
    width:124px; 
    height:124px; 
    left:50%; 
    top:50%; 
    margin-left:-62px; 
    margin-right:-62px; 
    background-image:url(/images/loading51.gif); 
} 

通常、私は新しいAJAX呼び出したら、これを行うには、

$(".LoadingOverlay").remove(); 

完了です。しかし、プリロードが完了すると、新しいページをロードすることがありますように見えますので、あなたはこれを必要としません。