jQuery整个HTML页面加载微调

我正在尝试一些简单的东西 – 制作一个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/