CODEWITHSUNDEEP
javascriptcss
TimFoolery
TimFoolery

Reputation: 1925

Get JavaScript to relinquish CPU so that browser can apply new stylesheet?

Upon loading, my web site runs this code if the users is using an alternate theme:

ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css");
AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() {
    AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
    });

What AJAX_LoadResponseIntoElement does ought to be obvious, but here's a short explanation of ReplaceJSCSSFile: It basically searches for link elements within the web page with their src property equal to "css/skin1.css", at which point it creates a new link element (src="css/skin2.css") and uses .parentNode.replaceChild to replace the old with the new.

The problem with this is that initPage() sets the positions and of certain divs that move around on the screen in relation to the positions of static elements. The position of those static elements is fetched from CSS, but the CSS is not being applied before the code is running, and initPage() is putting things in the wrong place because of it.

I have tried using a callback:

ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css", function() {
    AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
    });
});

Unfortunately, this didn't work. Presumably, it tells the browser to replace the CSS file, and as soon as it tells the browser to do that, it moves on to the callback function, using AJAX to fetch the page contents. I'm thinking the page contents come back prior to the CSS file, which is why the new CSS is not being applied by the time initPage() is being executed.

Is it possible to fix this without using alternate stylesheets?

The only thing that I can come up with other than alternate stylesheets is fetching the CSS contents with AJAX (which would actually wait for the server's response before executing the callback function) to replace the "css/skin1.css" link element.

Upvotes: 1

Views: 163

Answers (1)

Raynos
Raynos

Reputation: 169401

You can fudge it and use setTimeout in your callback so that the body of the callback isn't run until a bit later. This gives the browser some time to recover.

Upvotes: 1

Related Questions