使用微调器加载jQuery整个HTML页面

Question

我正在尝试简单的事情 - 制作一个jQuery脚本,等待显示整个页面,包括所有DIV,文本和图像.在加载页面时,我不想显示页面的某些部分,而是显示旋转的GIF图像,而当加载整个页面时,我们可以在浏览器窗口中淡化页面内容.

有很多脚本可以将ajax请求加载到容器DIV中 - 但这是不同的.这将在加载HTML页面时显示旋转的GIF.任何帮助表示赞赏

此类脚本仅适用于ajax请求

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

Answer 1

$(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/