Native post for loading a Javascript page?

Question

I would like the page to block / load a script that overlays the entire page and displays a “Loading ...” message while loading all assets to avoid flashes of non-leafy content, etc.

Basically I want something like a jQuery BlockUI method for blocking a page: $.blockUI(); , but I want it in my own javascript so that I don’t have to wait for jQuery to load (I load my scripts through RequireJS , so by the time I execute my block of code, I already loaded many other dependencies for my application, and I get this flash of non-content which I am trying to avoid).

Does anyone know of a built-in javascript solution that can work for me that I can insert as a lock (in terms of asset loading) script before calling RequireJS?

Answer 1

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

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

This DIV can already be displayed in the style of position: absolute , width: 100% and height: 100% . This CSS can be inline, then it will be applied without any other file loading. Or, as @aroth commented, you can simply set its DIV to display: block and the contents of your page in another DIV with display: none .

Then just hide it using 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 loading all other elements.

Finally, I put this code here as a sample .

Answer 2

My suggestion was to set up a mask with a loading message in the middle using HTML and CSS. Then javascript removes the mask and loads the message after the page is fully loaded.