Наложение страницы Jquery

ProgramBox

Наложение страницы Jquery

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#jquery #ajax #overlay

#jquery #ajax #наложение

Вопрос:

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

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

Запускает наложение «Пожалуйста, подождите, пока страница загружается» на странице при нажатии на ссылку
Сохраняйте наложение до полной загрузки выбранной страницы, а затем удалите его

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

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

Спасибо.

1. Если под выбранной страницей вы подразумеваете фактический переход на новую страницу, нет способа загрузить эту страницу, пока предыдущая страница все еще видна (все возможно, но это было бы слишком сложно). Если вы имеете в виду то, что я думаю, вы имеете в виду, вы создаете наложение как 100% div на новой странице, вводите текст all, затем удаляете его в document.ready или window.onload, установив для него значение dislay none (или используя jQuery hide, то же самое).

2. Что, если страница была внутри iFrame?

Ответ №1:

Концепция довольно проста. Установите 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. Ваш метод аналогичен тому, что я разместил на некоторых страницах, где содержимое извлекается через AJAX.request. Но то, что я ищу, — это если новая страница вообще является новой страницей. Например. Текущий URL-адрес со ссылкой = www.mydomain.com/page1 URL новой страницы = www.mydomain.com/page2 Итак, что мне нужно изменить в вашем коде?

Ответ №2:

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

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

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

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

1. Это именно то, что мне было нужно. Я не против добавлять наложение на каждую новую страницу, поскольку их не так много. Большинство страниц имеют содержимое, полученное через AJAX.request, и у меня они работают нормально, но при начальной загрузке страницы я хочу иметь наложение. С CSS тоже не очень хорошо. Можете ли вы опубликовать CSS, чтобы создать наложение на новую страницу с центрированным div, в котором будет текст / изображение, указывающее, что страница загружается?

Метки: Наложение страницы Jquery