HOW TO check if an external CSS file is loaded using Javascript

Question

Hi Guys,

I have a function doing the following using javascript:

1. Create link element and set href=cssFile.
2. Insert the link element in head tag.
3. Create a div element.
4. Set the class name using setAttribute
5. appendChild the div on body.
6. Now getting CSS rule value using document.defaultView.getComputedStyle(divElement, null)[cssRule].

Now getComputedStyle is returning the default values, and if I wait on breakpoint using Firebug before getComputedStyle call, then it returns the CSS rule from the CSS injected.

Regards,
Munim

Answer 1

I assume you are doing this because you need to dynamically create the URL of the stylesheet.

Couple options come to mind:

1) Create the URL server-side and avoid this problem altogether.

2) Use a setTimeout to check whether or not the style has been loaded and check every 20ms or so until getComputedStyle returns the value you want.

I don't like #2 at all...but it's an option. If you use #2 make sure to clear the timeout even if there is an exception.

Answer 2

You can create the dynamic css url and fetch the css as plain text using a normal ajax call.

Then use this to load the css:

function loadCss(cssText, callback){
    var style = document.createElement('style');
    style.type='text/css';
    if(callBack != undefined){
        style.onload = function(){
            callBack();
        };
    }
    style.innerHTML = cssText;
    head.appendChild(style);
}

And use it like this:

loadCss(ajaxResponseText, function(){
    console.log("yaay css loaded, now i can access css defs");
})