AJax does not have time to load the page, how to fix it?

Question

css

There is html code:
Test



Loading data...


There is ajax script:
function showContent(link) {
var cont = document.getElementById('contentBody');
var loading = document.getElementById('loading');
cont.innerHTML = loading.innerHTML;
var http = createRequestObject();
if( http ) {
http.open('GET', link);
http.onreadystatechange = function () {
if(http.readyState == 4 ) {
cont.innerHTML = http.responseText;
}
}
http.send(null);
} else {
document.location = link;
}
}
// create ajax object
function createRequestObject() {
try { return new XMLHttpRequest() }
catch(e) {
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e) {
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch (e) { return null; }
}
}
}

There is a loadable file with code and css connection:

test
_______________________________________________________________
Loading the page works fine, BUT the styles seem to be loaded with a delay.
The page has already loaded, but the style is not quite yet, and you can see that the old style is first on the page, and then the new one is turned on.

How can I make the style load faster than the page being loaded?

Answer 1

Connect to faster internet, or upgrade your computer.
And at the same time learn how http works.
Include styles in advance, and not at runtime when they are ALREADY needed.
You can also put all the styles in <style>.
In general, a whole bunch of crutches can be invented.

Answer 2

You have been told correctly. Include styles in the head. If the styles are dynamic, let the backend take care of it.
There is also a hack when you have a fixed div on top of the whole screen, for example, with the inscription "loading ..." When the download is complete, it is deleted.