使用jQuery加载页面全屏和高度(或窗口)？

Question

我不知道这是否可行,我已经尝试寻找解决方案,但是根本没有运气.

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

我自己已经尝试了几件事,但总会导致相同或类似的问题; 或者动画gif在页面加载时没有显示动画和/或加载页面没有覆盖整个区域,特别是当显示额外的内容时(即使是高度:100%;唯一的'修复'对此是通过使用高度:300%;但这当然没有解决方案).

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

Answer 1

我可能会这样解决:尝试演示

优点是,叠加的内容居中,您不会粘在背景图像上.因此,您可以将任何内容放入叠加层,例如文本"待命"加上动画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(),当所有内容都完整加载时,您应该使用这个火,因此图像也是如此.