jQuery: loading css on demand + callback if done

Question

hi,

i want to load css files on demand (by eg. running a xmlhttp request which returns the css files to be loaded) for example: style1.css, style2.css ..

so - is there a way in jQuery (or a plugin) to this:

• bulk-loading several files + adding all those css-files into the dom
• when finished loading: firing a callback (like alerting "all stylesheets are finished loaded!");

the idea is: loading html via xmlhttp, loading +adding required css-files, then - after anything is finished, display that html.

any ideas? thx

Answer 1

Here is how I would load it:

$(document).ready( function() {
    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "path/to/file/style.css"
    });
    $("head").append(css);
});

Answer 2

If you want it to by dynamic (read: on demand) you can modify Whit's response to loadCssFile() and call that with the file you want to load.

function loadCssFile(pathToFile) {
    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: pathToFile
    });
    $("head").append(css);
}