I relocated my CSS and JS files(you can see this in source code of this page, press
U in web browser) in the end of
<body> tag following the recommendations of Google Page Speed for improve page load speed. But thereafter I get new problem, when site is loading first all visitors see naked and ugly HTML markup on one second(depend from internet connection speed) thereafter applied styles from CSS files and then JS.
We are need a
noscroll class which added to body before render page to prevent page scroll, after page fully loaded we are removed that class from body. Styles for overlay, spinner and animation fro spinner see below. Animation for spinner I found [here][linkt-to-animations] (many thanks to this man)
Two div elements with id attribute
Some JS code that is add a few logic.
Right after page start rendering body, added class
noscroll to body tag for prevent scroll and set styles properties
display: block to overlay and spinner.
Thereafter page is fully loaded we do all operations in reverse order. Set styles properties
display: none to spinner and overlay then unset from body tag class
I wrote all this code in separate HTML file(in same order as in post) and then include it right after body tag opened.
This is all, example of work you should have seen when this page have been loaded)))
P.S. Maybe later I will be create a small plugin for display loader until page fully loaded.