Задержка загрузки страницы jquery - PullRequest
Новая
       10

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

0 голосов
/ 14 марта 2011

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

Вот скрипт jquery, который у меня есть.Происходит то, что контент загружается сначала, а затем loader.gif позже.Как я могу показать контент из внешнего источника через некоторое время хх ..?Я имею представление о .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;
}

Ответы [ 3 ]

1 голос
/ 14 марта 2011

Вы сказали, что 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();
0 голосов
/ 14 марта 2011

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

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);
});

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

0 голосов
/ 14 марта 2011

С веб-сайта 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 , это может быть тем, что вам нужно.

...