CSS loading after HTML loads

Question

I have a form at http://www.anhatweb.tk/web/auth/create to create a new user
But whenever i load the page a loader comes but we can see if i remove the loader HTML loads first and then the CSS loads....Is there any way that I can load CSS first and then load the HTML?
My code:

<html lang="en">
    <head>

        <!-- Basic Page Needs-->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ABC</title>

        <!-- Mobile Specific Metas-->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSS-->
        <link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">

    </head>
<body>

possible duplicate: http://stackoverflow.com/questions/9550760/hide-page-until-everything-is-loaded-advanced — Daniel, Oct 24 '16 at 06:22
it is impossible to do something like that cause browser needs html to recognize any css, js or ttf files etc. the only way is that all browser on the planet change their settings something like when they recognize css link then stop doing html firsty download css file and then continue with html — , Oct 24 '16 at 06:30
I believe your question itself is wrong, If the css file link is placed in the header section as you have shown in the question it will be loaded first and then only the body content is loaded, `All the scripts and css are loaded synchronously` as they appear on the HTML, So conclusion is all the referenced files in the head section is loaded first and then the body HTML part. — Rajshekar Reddy, Oct 24 '16 at 08:09

score 1 · Accepted Answer · answered Oct 24 '16 at 08:04

The HTML has to download first before the css can even start downloading because the location of the css file is stored within the HTML head tag. Because of the direction of this dependency, you can't really reverse it.

As @Daniel said, the best option you likely have is to "hide" the HTML until the CSS has completed loading. Lots of websites do this to avoid the flash of non-css that you're experiencing, it's pretty normal (and annoying to deal with).

I would give just hiding the elements until the onLoadCompleted is called. If you still see the flash after that, I would load the stylesheet manually on the onLoadCompleted (it should be executed at runtime instead of async) and then show the elements.

score 0 · Answer 2 · answered Oct 24 '16 at 06:23

0

No, the browser fetches the HTML, parses the Markup and when it comes to an external resource (css or javascript) it will load this. After loading the external resource the browser will continue parsing the Markup.

answered Oct 24 '16 at 06:23

Niedermann IT-Dienstleistungen

31
4

But this is not happening in my case...the browser loads html fully and then implements css – Anhat Singh Oct 24 '16 at 06:27

CSS loading after HTML loads

2 Answers2