JQuery плавный переход на страницу с preloader - PullRequest
Новая
       41

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

0 голосов
/ 26 марта 2012

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

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

Что ж, мне нужно поместить предварительный загрузчик анимированных изображений поверх каждой страницы, прежде чем она будет загружена. Может ли кто-нибудь помочь мне с кодом 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;
    }
});

1 Ответ

1 голос
/ 26 марта 2012

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

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

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

...