Native Javascript page loading message?

Question

I'd like a page blocking/loading script that will overlay the entire page and display a "Loading..." message while all the assets are loading, to avoid flashes of unstyled content, etc.

I basically want something like jQuery's BlockUI's page blocking method: $.blockUI();, but I want it in native javascript so I don't have to wait for jQuery to load (I'm loading my scripts via RequireJS, so by the time my code block executes, I've already downloaded numerous other dependencies for my app, and I get that flash of unstyled content which I'm trying to avoid).

Anyone know of a native javascript solution that might work for me, which I can insert as a blocking (in terms of asset loading) script before my RequireJS call?

Answer 1

You can bring your code already with a DIV floating over your page.

<div id="loading">
    Loading! Please calm down guy...
<div>

This DIV can be displayed already styled to be position: absolute, width: 100% and height: 100% . This CSS can be inline, then it will be applied without any other file downloading. Or, like commented by @aroth, you can just set it DIV to display: block and your page content inside another DIV with display: none.

Then just hide it with a simple JavaScript at the end of your code (near </body>):

<script type="text/javascript">
    document.getElementById("loading").style.display = "none";
    document.getElementById("content").style.display = "block";
</script>

This script will be executed only after all the other elements are loaded.

Finally, I put this code here as sample.