我正在尝试一些简单的东西 – 制作一个jQuery脚本,等待显示整个页面,包括所有DIV,文本和图像.当页面正在加载时,而不是显示页面的部分,我想显示一个旋转的GIF图像,并且当整个页面加载时,我们可以在浏览器窗口中淡出页面的内容.
有足够的脚本将ajax请求加载到容器DIV中 – 但这是不同的.这将在HTML页面加载时显示旋转GIF.任何帮助是赞赏
这种类型的脚本只适用于ajax请求
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
解决方法
$(document).ready(…)在DOM加载后立即触发.这是即将到来你使用$(window).load(…)：
JavaScript的：
$(window).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/
