jquery页面加载延迟

Question

我想在页面加载一段时间后从外部源加载 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;
}

Answer 1

你说 gif 是在你 ajax pull 之后加载的。如果这是您的问题，您可以在加载 gif 后调用 ajax pull，方法是：

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

Answer 2

来自 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 函数，则可能是您的问题想。

Answer 3

您的代码中有一个小问题：

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”并不能保证 DOM 会被解析或渲染。