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>

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 — user5660692
– user5660692, Commented Oct 24, 2016 at 6: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
– Rajshekar Reddy, Commented Oct 24, 2016 at 8:09

k2snowman69 · Accepted Answer · 2016-10-24 08:04:51Z

1

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.

answered Oct 24, 2016 at 8:04

k2snowman69

1,9291 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niedermann IT-Dienstleistungen · Accepted Answer · 2016-10-24 06:23:04Z

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, 2016 at 6:23

Niedermann IT-Dienstleistungen

314 bronze badges

1 Comment

Anhat Singh Over a year ago

But this is not happening in my case...the browser loads html fully and then implements css

Collectives™ on Stack Overflow

CSS loading after HTML loads

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related