How to asynchronously load CSS using jQuery?

Question

I want to use jQuery to asynchronously load CSS for a document.

I found this sample, but this doesn\'t seem to work in IE:

Answer 1

As mentioned in RequireJS docs, the tricky part lies not in loading the CSS:

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

but in knowing when/whether the CSS has loaded successfully, as in your use case " I want to load jQuery UI after the all other data, images, styles, etc load".

Ideally RequireJS could load CSS files as dependencies. However, there are issues knowing when a CSS file has been loaded, particularly in Gecko/Firefox when the file is loaded from another domain. Some history can be found in this Dojo ticket.

Knowing when the file is loaded is important because you may only want to grab the dimensions of a DOM element once the style sheet has loaded.

Some people have implemented an approach where they look for a well known style to be applied to a specific HTML element to know if a style sheet is loaded. Due to the specificity of that solution, it is not something that would fit will with RequireJS. Knowing when the link element has loaded the referenced file would be the most robust solution.

Since knowing when the file has loaded is not reliable, it does not make sense to explicitly support CSS files in RequireJS loading, since it will lead to bug reports due to browser behavior.