Вопрос по jspinner, jquery, ajax – JQuery загрузки всей страницы HTML с помощью счетчика

15

Я пытаюсь сделать что-то простое - создать скрипт jQuery, который будет ждать, чтобы показать всю страницу, включая все DIV, текст и изображения. Пока страница загружается, вместо того, чтобы показывать части страницы, я хотел бы показать вращающееся изображение в формате GIF, и когда вся страница загружена, мы можем скрыть содержимое страницы в окне браузера.

Существует множество сценариев, которые можно загрузить с помощью ajax-запроса в контейнер DIV, но это не так. Это покажет вращающийся GIF во время загрузки HTML-страницы. Любая помощь приветствуется

Этот тип сценария работает только на запросы AJAX

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

Ваш Ответ

4   ответа
3

а затем удалил бы наложение после загрузки страницы. Вы можете настроить это, чтобы также отображать loading.gif, если хотите. Вот пример:

HTML

​<body>
<div id="container">
    <h2>Header</h2>
    <p>Page content goes here.</p>
    <br />
    <button id="remove_overlay">Remove Overlay</button>
</div>
​</body>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

#container{padding:20px;}

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}

#overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:2305px !important; /*change to YOUR page height*/
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}

JQuery:

$(document).ready(function () { 

        // Set a variable that is set to the div containing the overlay (created on page load)
        var page_overlay = jQuery('<div id="overlay"> </div>');

        // Function to Add the overlay to the page
        function showOverlay(){
            page_overlay.appendTo(document.body);
        }
        // Function to Remove the overlay from the page
        function hideOverlay(){
            page_overlay.remove();
        }

        // Show the overlay.
        $(showOverlay);

       });
});

$(document).ready(function () { 
    $(hideOverlay);
});

Вам нужно настроить его так, чтобы он загружал оверлей, как только запрашивается страница (настройте$(showOverlay); вызовите, чтобы он сработал до того, как документ будет готов.

Вот простая рабочая скрипка с кнопкой для удаления наложения. Вы должны быть в состоянии пойти оттуда :)http://jsfiddle.net/3quN5/     & # X200B;

34

$(document).ready(...) срабатывает, как только DOM загружен. Это слишком рано Вы должны использовать$(window).on('load', ...):

JavaScript:

$(window).on('load', function(){
    $('#cover').fadeOut(1000);
})

CSS:

#cover {
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}

HTML:

<div id="cover"></div>
<!-- rest of the page... -->

посмотрите на это jsFiddle:http://jsfiddle.net/gK9wH/9/

Отличная jsFiddle. Помог тонну!
Смотрите редактировать ... или прямо здесь:jsfiddle.net/gK9wH
Это было потому, что изображение больше не было доступно! Это работает:jsfiddle.net/gK9wH/9  (И не забывайте повышать или принимать ;-)
да. Я вижу, что работает! Но я не вижу прядильщика. может, прядильщик скрыт прокруткой окна JSFiddle? user1317510
да, готовый документ запускается слишком рано, и некоторые элементы могут быть в середине пути рендеринга в окне браузера, и это покажет это ... так как мы можем сначала показать счетчик, а затем скрыть его - если мы ждем окно для загрузки? user1317510
0

вы имеете в виду все, что находится между тегами тела? Лучший способ сделать вращающийся подарок - добавить класс, который определяет gif как повторение и центрирование. Удалить класс, когда страница готова к показу.

$('body').addClass('loading')
$('body').removeClass('loading')

Это всегда лучший метод, потому что если вы отправляете что-то, попробуйте добавить gif с помощью добавления DOM, некоторые браузеры не сделают этого, потому что страница была отправлена.

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

div, который будет покрывать всю страницу, пока он загружается. Это будет непрозрачно, и будет содержать ваш GIF.

Следующее будет скрывать div после загрузки страницы:

$(document).ready(function() {
  // Hide the 'cover' div
});

Следующее сделало бы div размером страницы:

.div{
  height:100%;
  width:100%;
  overflow:hidden;
}

Похожие вопросы