How can I stop rendering HTML until external css, js loaded

Question

I just want to stop rendering to the html to the DOM until my Css and Js loaded from an external source.

    <html is showing here >
            <link type="text/css" rel="stylesheet" href="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/css/style.css">
           <script type="text/javascript" language="javascript" src="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/js/mywinners-global-scripts.js">
    <html is end here >

Why I'm doing this is the static html is looking ugly until the css and js loaded and then after sometime?(after loading css and js from network) it looks cool.

So I just want to stop showing html until the script and css load.

Any clues/help regarding this ?

@Smeegs nailed it; put the `link` and `script` tags in the `head` tag of the doc. — elixenide, Jul 10 '14 at 18:45
@Smeegs Thanks for the prompt reply. They are already in head. I'm guessing because of network those files are loading slowly. — Suresh Atta, Jul 10 '14 at 18:45
That's odd, they should be blocking calls. Unless I'm missing something. — Smeegs, Jul 10 '14 at 18:45
Create a wrapper of over content with display:none; once you check using document.ready() just change the wrapper style to `visible` also you can add "loading please wait.." div out of wrapper to make it more interactive. — MarmiK, Jul 11 '14 at 07:44

score 0 · Answer 1 · edited May 23 '17 at 12:05

If your includes are nested in the BODY tag not a lot you can do with just pure HTML. If you can move them up into the HEAD section section this should fix itself. A great breakdown of how the page loads and what fires when is on an answer to another StackOverflow question see this link :

Which is the load, rendering and execution order of elements in a HTML page?

Hope you find this helpful.

How can I stop rendering HTML until external css, js loaded

1 Answers1