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

Your question is valid, but I would not get in a practice of hiding or covering the page while things are spinning up.

It keeps the user from understanding what's happening on the page. While lots of things may need to load, different parts of the page should spring to life as they're loaded. You should get in the practice of locking controls that are not ready, perhaps displaying a spinner or some other progress indicator over them. Or setting the cursor to wait on loading items.

This keeps the user in the loop and allows him to see and interact with parts as they come online instead of obscuring all parts until everything is ready.

You will normally want to load the things the user needs the quickest access to, usually stuff above the fold, first. Loading is a prioritization that can easily be coordinated with Promises.

At the very least seeing the page allows the user to get his bearings and decide what to do. Be transparent.

Answer 2

I was seeking a non-javascript solution so I found one that is working on most browsers in acceptable manner.

Since the loading order of CSS rules matters;

• Define the hiding class in the first CSS file or inline in head.

.hidden-onpage-load{ display: none; } 

• In the body, the class can be used as

<div class="hidden-onpage-load"> ... </div>

• Redefine it inline or in a CSS file after all other CSS and JS files are loaded

.hidden-onpage-load{ display: block; }