javascript 使用 jQuery 加载页面全宽和屏幕（或窗口）的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11757646/
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
Loading page full width and height of screen (or window) with jQuery?
提问by Joanne
I don't know if this is possible and I already tried searching for a solution, however no luck at all.
我不知道这是否可行，我已经尝试寻找解决方案，但根本没有运气。
I am trying a full page loading screen with an animated gif (loader-bar.gif), while the background is slightly transparent (or blurred). I guess this would be possible with jQuery, but I really do not understand how to achieve this?
我正在尝试一个带有动画 gif (loader-bar.gif) 的整页加载屏幕，而背景则略微透明（或模糊）。我想这可以用 jQuery 实现，但我真的不明白如何实现这一点？
I already tried several things myself, but always results in the same or similar problem; or the animated gif does not show animated while the page is loading and / or the the loader page is not covering the whole area, especially when extra content is shown (not even with height:100%; the only 'fix' for this is by using height:300%; but that is of course no solution).
我自己已经尝试了几件事，但总是导致相同或类似的问题；或者在页面加载时动画 gif 不显示动画和/或加载器页面没有覆盖整个区域，尤其是在显示额外内容时（甚至没有高度：100%；唯一的“修复”是通过使用 height:300%; 但这当然不是解决方案）。
So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?
所以我决定重做全屏/窗口加载器页面，也许 jQuery 可以正确完成这项工作，对吧？
回答by insertusernamehere
I would possibly solve it like this: try demo
我可能会这样解决：尝试演示
The advantage is, that the content of the overlay is centered and you are not stuck to a background image. So you can place any content into the overlay, for example a text "stand by" plus an animated gif.
优点是，覆盖的内容居中，您不会被背景图像所束缚。因此，您可以将任何内容放入叠加层，例如“备用”文本加上动画 gif。
CSS
CSS
body, html {
margin: 0;
padding: 0;
}
div.overlay {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.overlay > div {
display: table-cell;
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
vertical-align: middle;
}
HTML
HTML
<div class="overlay"><div>CENTERED ICON</div></div>
JavaScript
JavaScript
// on load finished
$(window).load(function() {
// select element and fade it out
$('.overlay').fadeOut();
});
Notethat you should use $(window).load()as this fires, when everything is loaded completey, so images too.
请注意$(window).load()，当所有内容都已完全加载时，您应该使用它来触发，因此图像也是如此。
回答by Fabrizio Calderan
try to define an element - or append it via js - as first node in the body, e.g.
尝试定义一个元素 - 或通过 js 附加它 - 作为正文中的第一个节点，例如
<div id="load">Please wait</div>
with this style
用这种风格
html, body, #load { height: 100%; width: 100%; }
#load {
position : fixed;
z-index : 1; /* or higher if necessary */
top : 0;
left : 0;
overflow : hidden;
text-indent : 100%;
font-size : 0;
background : url(some-animated-loader.gif) center no-repeat;
}
then remove (or hide) that div when loador DomReadyevents occur
然后删除（或隐藏）该div时load或DomReady事件发生
回答by Oswaldo Acauan
Try something like this -> http://jsfiddle.net/3wU6C/5
尝试这样的事情 - > http://jsfiddle.net/3wU6C/5
