Force browsers to load CSS before showing the page

by

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.

More Related Contents:

  1. Why do browsers match CSS selectors from right to left?
  2. css ‘pointer-events’ property alternative for IE
  3. What is use of ‘initial’ value in CSS?
  4. Browser Caching of CSS files
  5. issue with CSS media queries(scrollbar)
  6. How to disable CSS in Browser for testing purposes
  7. How do I make Firefox auto-refresh on file change?
  8. Is there a way to tell browsers to honor the jpeg exif orientation?
  9. How to always show the vertical scrollbar in a browser?
  10. Which browsers support data URIs and since which version?
  11. How to place a div over a image? [closed]
  12. elements are not centered aligned inside the wrapper and when I set the width of the wrapper it goes out of the browser width..any solution?
  13. How can I center text (horizontally and vertically) inside a div block?
  14. Can I create a div with a Curved bottom?
  15. Best Practices & Considerations when writing HTML Emails [closed]
  16. Is there a way to style part of an input field’s value? [duplicate]
  17. How does this CSS produce a circle?
  18. CSS fixed width in a span
  19. How to change color of disabled html controls in IE8 using css
  20. Can a dynamic class be styled using CSS? [duplicate]
  21. Empty vertical space between columns in Bootstrap 4
  22. Select second last element with css
  23. Css transition from display none to display block, navigation with subnav [duplicate]
  24. Apply CSS Style on all elements except with a SPECIFIC ID
  25. Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?
  26. Select option padding not working in chrome
  27. How to make bootstrap carousel image responsive?
  28. Background-Color of BODY tag applied to the whole HTML [duplicate]
  29. Can you style ordered list numbers?
  30. Best Way to do Columns in HTML/CSS

Leave a Comment