我想简单的东西 - 做一个jQuery脚本，将等待显示整个网页，包括所有的DIV，文字和图像。 当页面正在加载，而不是显示在页面的部分，我想表现出一个旋转的GIF图片，当整个页面加载，我们可以在浏览器窗口褪色页的内容。
有很多的脚本与Ajax请求到一个容器DIV加载的 - 但这是不同的。 这将显示一个旋转的GIF而一个HTML页面加载。 任何帮助表示赞赏
这种类型的脚本仅适用于Ajax请求
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
$(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/
我将覆盖覆盖整个页面，然后取出覆盖一次加载页面。 你可以调整这也显示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/
我认为最好的办法是有一个“盖” DIV同时加载，这将覆盖整个页面。 这将是不透明的，并且会包含您的GIF。
那么下面就隐藏在div一旦页面加载：
$(document).ready(function() {
// Hide the 'cover' div
});
下面将使DIV页面的大小：
.div{
height:100%;
width:100%;
overflow:hidden;
}
首先你的意思是在身体标记之间的一切吗？ 做纺纱的礼物，最好的办法是增加一个类定义GIF，成为无重复和居中。 当页面准备好被显示的删除类。
$('body').addClass('loading')
$('body').removeClass('loading')
这始终是最好的技术，因为如果你提交的东西，然后尝试通过DOM除了添加GIF因为该页面已被提交一些浏览器将无法做到这一点。
