jQuery вся загрузка HTML-страницы с помощью spinner

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

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

этот тип скрипта работает только на ajax-запросах

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

4 ответов

$(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/

30

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

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

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

3

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

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

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

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

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

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

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

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

0