How to load stylesheets after loading and displaying page without any style

css, html, javascript, jquery

Solution

Try this:

<head>
    <script type='text/javascript'>
        function addstyle()
        {
            document.getElementById('style').href='style.css';
        }
    </script>
    <link rel="stylesheet" id="style" type="text/css" href="">
</head>
<body onload="addstyle()">
    <h1>Good Morning</h1>
    <p>Hello whats up</p>
    <p>Hope you will have a great day ahead</p>
</body>

Problem

I was thinking instead of loading everything in parallel. I will allow to load and display the basic no-styled layout and then will load the css file after page has finished loading, but being a newbie in Javascript. I am not able to do this. Till now I have tryed: ``` <head> <script type='text/javascript'> function addstyle() { document.getElementBytype('text/css').href='style.css'; } </script> <link rel="stylesheet" type="text/css" href=""> </head> <body onload="addstyle()"> <h1>Good Morning</h1> <p>Hello whats up</p> <p>Hope you will have a great day ahead</p> </body> ``` Here as you can see, I am trying to load `style.css` after the page is displayed in the browser, but it is not working.

Original source