javascript - 使用 jQuery 加载屏幕(或窗口)的页面全宽和高度？

Question

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

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

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

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

Answer 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() 作为触发，当所有内容都加载完成时，图像也是如此。