jQuery плавный переход страницы с preloader

Question

Я пытаюсь использовать этот код (ниже), чтобы исчезать в содержимом div, когда я нажимаю ссылку на своем веб-сайте, а затем исчезаю, когда я нажимаю другую ссылку, и новое содержимое исчезает. может видеть этот пример здесь:

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

Ну, мне нужно положить одушевленные GIF прелоадер на верхней части каждой страницы, прежде чем он будет загружен. Может ли кто-нибудь помочь мне с кодом jquery? спасибо ..

Код для замены содержимого и FadeIn/выход:

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

Но похоже, что вы будете загрузки новой страницы, как только преднатяг будет завершена, так что вы не будете нуждаться в этом ,