用微调器加载jQuery整个HTML页面 [英] jQuery whole HTML page load with spinner

问题描述

我正在尝试简单的事情-创建一个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).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/

I am trying to something simple -- make a jQuery script that will wait to show the entire page, including all DIVs, text, and images. While the page is loading, instead of showing parts of the page I would like to show a spinning GIF image, and when the entire page is loaded we can fade the contents of the page in the browser window.

There are plenty of scripts to load with an ajax request into a container DIV -- but this is different. This will show a spinning GIF while an HTML page is loading. Any help is appreciated

This type of script only works on ajax requests

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

解决方案

$(document).ready(...) fires as soon the DOM is loaded. This is too soon. You should use $(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... -->

look at this jsFiddle: http://jsfiddle.net/gK9wH/9/

这篇关于用微调器加载jQuery整个HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！