задержка загрузки страницы jquery

Я хочу загрузить div из внешнего источника после загрузки страницы с некоторой задержкой.

Вот скрипт jquery, который у меня есть. Происходит следующее: сначала загружается контент, а затем loader.gif. Как я могу показать контент из внешнего источника через какое-то xx раз?..? У меня есть идея о функции .load(), но я не знаю, как ее реализовать.

$(window).load(function() {
$('<div id="overlay"><img src="loading.gif" /></div>')
.css('opacity', '0.5')
.insertAfter('body');

window.setTimeout(function() {
$(document).ready(function() {
$('#overlay').remove();
});}, 1000);
$('.body').show();
});

<div id="container">
<div id="header">navigation</div>
<div id="body" class="body">Body</div>
<div id="footer">footer</div>
</div>


#overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: gray;
}

.body{display:none;}

#overlay img {
 display: block;
 width: 32px;
 height: 32px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -26px 0 0 -26px;
 padding: 10px;
 background: #fff;
 -moz-border-radius: 6px;
 border-radius: 6px;
}

jquery load external
person Ravi    schedule 14.03.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы сказали, что GIF загружается после того, как вы вытащили ajax. Если это ваша проблема, вы можете вызвать свой ajax pull после загрузки gif, выполнив следующие действия:

yourimg = new Image(); 
yourimg.src = "loading.gif";

yourimg.loadEvent = function(url, image){
    var overlay = $('<div id="overlay" />');
    overlay.append(image).css('opacity', '0.5').insertAfter('body');
    //call whatever you want here. your image is loaded.
}

yourimg.load();
person bluefoot    schedule 14.03.2011

arrow_upward
0
arrow_downward

С веб-сайта jquery

The load event is sent to an element when it and all sub-elements have been
completely loaded. This event can be sent to any element associated with a URL: 
images scripts, frames, iframes, and the window object.

Вам нужно показать свой div во время загрузки тела и скрыть его при загрузке. Я не уверен, что это то, о чем вы спрашиваете. Если это не функция setTimeout, возможно, вам хочу.

person Belinda    schedule 14.03.2011
comment
Да, на самом деле это не то, что я здесь ищу. Контент, который загружается в body div, будет тяжелым. Итак, я хочу сначала загрузить главную страницу, а затем содержимое div тела с помощью функции .load(). - person Ravi; 14.03.2011

arrow_upward
0
arrow_downward

В вашем коде есть небольшая проблема:

window.setTimeout(function() {
$(document).ready(function() {
...

В этом коде вы устанавливаете тайм-аут для функции, которая делает это:

function() {
    $(document).ready(function() {
        $('#overlay').remove();
    });
}

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

Ваш код должен выглядеть так:

$(window).load(function() {
    setTimeout(function() {
        // Do the dom manipulations remove the placeholder
    }, 1000);
});

Заполнитель будет удален через секунду после события загрузки. Обратите внимание, что события «загрузка» и «готовность» различаются. И «загрузка» не гарантирует, что DOM будет проанализирован или отображен.

person Juriy    schedule 14.03.2011
comment
@Juiry UPDATE извините, если я перепутал, на самом деле это то, что я здесь ищу. Контент, который загружается в body div, будет очень тяжелым. Итак, я хочу сначала загрузить главную страницу, а затем содержимое div тела с помощью функции .load(). - person Ravi; 14.03.2011