用jQuery加载页面全宽和屏幕（或窗口）的高度？答案

【问题标题】：Loading page full width and height of screen (or window) with jQuery?用jQuery加载页面全宽和屏幕（或窗口）的高度？
【发布时间】：2012-08-01 19:28:40
【问题描述】：

我不知道这是否可行，我已经尝试过寻找解决方案，但是完全没有运气。

我正在尝试使用动画 gif (loader-bar.gif) 的整页加载屏幕，而背景稍微透明（或模糊）。我想这可以通过 jQuery 实现，但我真的不明白如何实现这一点？

我自己已经尝试了几件事，但总是导致相同或相似的问题；或动画 gif 在页面加载时不显示动画和/或加载器页面未覆盖整个区域，尤其是在显示额外内容时（即使高度：100% 也不显示；唯一的“修复”是通过使用 height:300%；但这当然不是解决方案）。

所以我决定重做全屏/窗口加载页面，大概jQuery可以正确完成这项工作吧？

【问题讨论】：

一些代码会很有用
严重缺乏细节，示例代码，您尝试过的...这不是编码服务，它的帮助！

标签： javascript jquery html css

【解决方案1】：

我可能会这样解决：try demo

优点是，叠加层的内容居中，您不会被困在背景图像上。因此，您可以将任何内容放入叠加层，例如“待命”文本加上动画 gif。

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

<div class="overlay"><div>CENTERED ICON</div></div>

JavaScript

// on load finished
$(window).load(function() {
    // select element and fade it out
    $('.overlay').fadeOut();
});

注意您应该使用$(window).load()，因为它会在所有内容都加载完成时触发，所以图像也是如此。

【讨论】：

【解决方案2】：

试试这样的 -> http://jsfiddle.net/3wU6C/5

【讨论】：

【解决方案3】：

尝试定义一个元素 - 或通过 js 附加 - 作为正文中的第一个节点，例如

<div id="load">Please wait</div>

这种风格

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;
}

然后在 load 或 DomReady 事件发生时删除（或隐藏）该 div

【讨论】：