使用微调器加载 jQuery 整个 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10742665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery whole HTML page load with spinner
提问by user1317510
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.
我正在尝试做一些简单的事情——制作一个 jQuery 脚本，它将等待显示整个页面，包括所有 DIV、文本和图像。当页面加载时，我想显示一个旋转的 GIF 图像，而不是显示页面的一部分，当整个页面加载时，我们可以在浏览器窗口中淡化页面的内容。
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
有很多脚本可以将 ajax 请求加载到容器 DIV 中——但这是不同的。这将在加载 HTML 页面时显示一个旋转的 GIF。任何帮助表示赞赏
This type of script only works on ajax requests
此类脚本仅适用于 ajax 请求
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
回答by AvL
$(document).ready(...)fires as soon the DOM is loaded. This is too soon. You should use $(window).on('load', ...):
$(document).ready(...)加载 DOM 后立即触发。这为时过早。你应该使用$(window).on('load', ...)：
JavaScript:
JavaScript：
$(window).on('load', function(){
$('#cover').fadeOut(1000);
})
CSS:
CSS：
#cover {
background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
HTML:
HTML：
<div id="cover"></div>
<!-- rest of the page... -->
look at this jsFiddle: http://jsfiddle.net/gK9wH/9/
看看这个 jsFiddle：http: //jsfiddle.net/gK9wH/9/
回答by adamdehaven
I would cover the entire page with an overlay, and then remove the overlay once the page loads. You can tweak this to also show a loading.gif if you'd like. Here's an example:
我会用覆盖层覆盖整个页面，然后在页面加载后移除覆盖层。如果您愿意，您可以调整它以显示 loading.gif。下面是一个例子：
HTML
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
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:
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);
});
You'll need to tweak this so that it loads the overlay as soon as the page is requested (tweak the $(showOverlay);call so that it fires before document is ready.
您需要对此进行调整，以便它在请求页面时立即加载叠加层（调整$(showOverlay);调用，使其在文档准备就绪之前触发。
Here's a simple working fiddle with a button to remove the overlay. You should be able to go from there :) http://jsfiddle.net/3quN5/?
这是一个简单的工作小提琴，带有一个用于删除覆盖层的按钮。你应该可以从那里去:) http://jsfiddle.net/3quN5/？
回答by m.edmondson
I think the best way would be to have a 'cover' div which will cover the whole page whilst it loads. It would be opaque, and would contain your GIF.
我认为最好的方法是有一个“封面”div，它会在加载时覆盖整个页面。它将是不透明的，并且会包含您的 GIF。
The following would then hide the div once the page has loaded:
一旦页面加载，以下将隐藏 div：
$(document).ready(function() {
// Hide the 'cover' div
});
The following would make the div the size of the page:
以下将使 div 成为页面的大小：
.div{
height:100%;
width:100%;
overflow:hidden;
}
回答by Elliott
First do you mean everything in the between the body tags? The best way to do the spinning gift is to add a class that defines the gif as none repeat and centered. The remove the class when the page is ready to be shown.
首先，您的意思是身体标签之间的所有内容吗？做旋转礼物的最好方法是添加一个类，将 gif 定义为不重复和居中。当页面准备好显示时删除类。
$('body').addClass('loading')
$('body').removeClass('loading')
This is always the best technique because if you submit something then try to add the gif through a DOM addition some browsers will not do it because the page has been submitted.
这始终是最好的技术，因为如果您提交某些内容，然后尝试通过 DOM 添加来添加 gif，则某些浏览器将不会这样做，因为页面已提交。
