Loading page full width and height of screen (or window) with jQuery?

Question

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?

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).

So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?

Answer 1

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.

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

Note that you should use $(window).load() as this fires, when everything is loaded completey, so images too.

Answer 2

try to define an element - or append it via js - as first node in the body, eg

<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 load or DomReady events occur

Answer 3

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