lilikon2016-11-09 07:47:40
lilikon, 2016-11-09 07:47:40

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

There is html code:

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;
} 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:

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 the question

In order to leave comments, you need to log in

2 answer(s)
Alexander Aksentiev, 2016-11-09

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.

Ivan, 2016-11-09

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question