Hide page until everything is loaded Advanced

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

Put a div on top, like so:

<div id="cover"></div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul>    <li>This</li>    <li>is</li>    <li>a</li>    <li>simple</li>    <li>test</li>    <li>of</li>    <li>a</li>    <li>cover</li></ul><div id="cover">LOADING</div>

Expand snippet