Force browsers to load CSS before showing the page

Solution 1:

I believe I have found a better way to handle this...

At the top of your output file put the following:

<body>
  <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
  ...
</body>

Then on the last line of your last loaded CSS file put:

#loadOverlay{display: none;}

This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.

Solution 2:

Have you ever used requirejs? you could set after your

requirejs.config(<confObj>);

something like this

require(Array[<all your CSS & JS >]);

requirejs will do the cache (like) stuff for you! requirejs api

Solution 3:

You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:

// CSS
#my-div { display:block !important; }

// HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>

Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.

Force browsers to load CSS before showing the page

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts