Javascript 使用jQuery加载页面屏幕（或窗口）的全宽和全高？

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

我正在尝试一个带有动画gif loader-bar.gif的全页加载屏幕，而背景稍微透明或模糊。我想这在jQuery中是可能的，但我真的不明白如何实现这一点

我自己已经尝试过几件事情，但总是导致相同或相似的问题；或者当页面加载和/或加载程序页面未覆盖整个区域时，动画gif不显示动画，特别是当显示额外内容时，高度不均匀：100%；唯一的“修复”方法是使用高度：300%；但这当然不是解决办法

---

所以我决定重做全屏/窗口加载器页面，也许jQuery可以正确完成这项工作，对吗？

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

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

---

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

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

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

---

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

尝试这样的操作->

尝试这样的操作->

我可能会这样解决它：

这样做的好处是，覆盖的内容居中，并且不会粘在背景图像上。因此，您可以将任何内容放置到覆盖中，例如文本备用加上动画gif

CSS HTML

---

请注意，您应该使用$window.load，当所有内容都加载完成时，它会启动，所以图像也会启动。

我可能会这样解决它：

这样做的好处是，覆盖的内容居中，并且不会粘在背景图像上。因此，您可以将任何内容放置到覆盖中，例如文本备用加上动画gif

CSS HTML

---

请注意，当所有内容都加载完成时，您应该使用$window.load来启动它，因此图像也是如此。

一些代码将非常有用严重缺乏详细信息、示例代码、您尝试过的内容。。。这不是编码服务，而是帮助！一些代码将是有用的严重缺乏细节，示例代码，你已经尝试。。。这不是编码服务，而是帮助！

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

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

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