Hide page until everything is loaded Advanced

Question

I have a webpage which heavily makes use of jQuery.

My goal is to only show the page when everything is ready.

With that I want to avoid showing the annoying

Answer 1

Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.

Put a div on top, like so:

set some styles:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

and hide it with JS when all elements are loaded:

$(window).on('load', function() {
   $("#cover").hide();
});

Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!

$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

//stackoverflow does not fire the window onload properly, substituted with fake load

function newW()
{
    $(window).load();
}
setTimeout(newW, 1000);

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999; 
    font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}

    
This
    
is
    
a
    
simple
    
test
    
of
    
a
    
cover


LOADING