JQuery Page Наложение - PullRequest
Новая
       3

JQuery Page Наложение

1 голос
/ 02 ноября 2011

Пожалуйста, потерпите меня, поскольку я новичок, когда дело доходит до JQuery и AJAX.Я постараюсь подробно объяснить, что мне нужно.

У меня есть страница со ссылкой, которая перенаправляет на другую страницу в том же домене.Я хотел сделать следующее:

  1. Триггер «Пожалуйста, подождите, пока страница загружается», наложение на страницу при нажатии на ссылку
  2. Сохраняйте наложение до тех пор, пока извлеченная страница не будет полностью загружена, а затем удалите его

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

Я знаю, что могу использовать $ (document) .ready, чтобы удалить новое наложение на новой странице, но у меня возникли некоторые трудности при созданииналожение на извлеченную страницу.Короче говоря, как и где я могу поместить код JQuery, чтобы создать наложение на странице, чтобы оно срабатывало до полной загрузки страницы.Надеюсь, это не слишком смущает.

Спасибо.

Ответы [ 2 ]

3 голосов
/ 02 ноября 2011

Концепция довольно проста. Установите div-обертку, которая будет содержать все содержимое вашей страницы, и загрузите данные в этот контейнер через AJAX. Перед запросом AJAX покажите наложение, при обновлении данных скрыть наложение.

CSS: 

#overlay {
    position:absolute; 
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    z-index:999;
    display:none;
}
#overlay span {
    margin:200px auto 0 auto;
}

HTML: 

<body>
    <div id="overlay">
        <span>Please wait while your page is loaded...
    </div>
    <div id="content">
        Page content. <a class="ajax-link" href="#!page2" rel="page2.php">Click for page 2</a>
    </div>
</body>

JQuery: 

$('#ajax-link').live('click',function(event){
    event.preventDefault();
    var $this    = $(this),
        $overlay = $('#overlay');

    $.ajax({
        url: $this.attr('rel'),
        beforeSend: function(){
            $overlay.fadeIn();
            window.location.hash = $this.attr('href').replace('#','');
        },
        success: function(data){
            $('#content').fadeOut().html(data).fadeIn();
            $overlay.fadeOut();
        }
        // I'd recommend adding some error handling here as well, possibly 
        // update the overlay text with the error response and gracefully 
        // fail-over to the previous content.
    });
});

// Since we are setting a hashbang when we load new pages, let's also support someone 
// landing on one of these AJAX-loaded pages
$(function(){
    if(window.location.hash){
        if(window.location.hash.indexOf('#!') === 0){
            $.ajax({
                url: window.location.hash.replace('#!','') + '.php',
                success: function(data){
                    $('#content').fadeOut().html(data).fadeIn();
                }
            });
        }
    }
});
1 голос
/ 02 ноября 2011

Если вы хотите, чтобы наложение для недавно извлеченной страницы было изначально видимым, то вы должны встроить это наложение в исходный HTML / CSS новой страницы.Затем вы можете использовать javascript в $(document).ready() для удаления наложения.Вы должны сделать это таким образом, потому что вы не можете запустить javascript, который манипулирует DOM на новой странице, пока он полностью не загрузится.Как правило, он будет частично или полностью видимым, прежде чем вы сможете запустить этот JavaScript.Итак, если вы хотите, чтобы начальное состояние, отображаемое на новой странице, имело наложение, то вам нужно запекать наложение прямо в HTML / CSS новой страницы, чтобы оно отображалось. Вот как оно отображается.

Затем, когда он успешно загрузится и DOM будет полностью загружен, ваш код в $(document).ready() сработает, что затем уберет наложение.

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

Единственный способ беспрепятственно иметь наложение в течение всего процесса, даже не видя, что окно чистое, было бычтобы не каждый на самом деле загрузить новую страницу URL.Вместо этого вам придется загружать новый контент с помощью Ajax и использовать Javascript, чтобы поместить его на место под оверлеем.Это, конечно, не приведет к изменению URL-адреса в строке URL-адреса, но приведет к непрерывному наложению.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...