jQuery плавный переход страницы с предварительным загрузчиком

Я пытаюсь использовать этот код (ниже), чтобы содержимое 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;
    }
});

transition jquery fadein smooth
person Giorgio    schedule 26.03.2012    source источник
comment
Я почти уверен, что код этой страницы приведет к очень негладкому мерцанию при загрузке новой страницы, а затем будет скрыт в $(document).ready() перед тем, как снова исчезнуть.   -  person Dave    schedule 26.03.2012

Ответы (1)


arrow_upward
1
arrow_downward

Используйте это, чтобы добавить наложение загрузки.

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

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

person Dave    schedule 26.03.2012
comment
Спасибо за ответ, но куда мне вставить это: - person Giorgio; 26.03.2012
comment
Спасибо, но мне нужен полный код для включения в мой, потому что я новичок в Jquesry.. спасибо - person Giorgio; 26.03.2012
comment
Обновлено, чтобы показать, куда вставить вызов append(). Поместите CSS в свой файл CSS. Вам не нужен вызов remove(). - person Dave; 26.03.2012