jQuery glatte Seite Übergang mit preloader

Question

Ich versuche, diesen Code (unten) zu verwenden, um einen Div-Inhalt einzublenden, wenn ich einen Link auf meiner Website drücke, dann ausgeblendet, wenn ich einen anderen Link drücke und der neue Inhalt eingeblendet wird sehen kann dieses Beispiel hier:

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

Nun, ich brauche ein belebte gif preloader oben auf jeder Seite zu setzen, bevor sie geladen werden. Könnte mir jemand mit dem jquery Code helfen? Dank ..

Codeinhalt tauschen und FadeIn/out:

$(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

Verwenden Sie diese eine Lade Overlay hinzuzufügen.

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

Und dann CSS verwenden, um zu steuern, wie es gerendert wird.

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

Normalerweise mache ich das, sobald der neue Ajax-Aufruf abgeschlossen

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

Aber es sieht aus wie Sie eine neue Seite geladen werden, werden, sobald die Vorspannung abgeschlossen ist, so dass Sie diese nicht benötigen .