Is there any way to detect when a CSS file has been fully loaded?

edit: It should be noted that browser support for onload events on CSS files has improved since my original answer. It is not fully supported though, so my answer below still has some relevance. Here is a compatibility chart, not sure how legit the source is though.

Ok, I finally found a solution.

This guy http://tugll.tugraz.at/96784/weblog/9080.html inserts link-tags and polls document.styleSheets[index].rules until it is no longer undefined (where index of course is the index of the newly inserted file). Unfortunately his code is buggy and only works with Safari & FF. So I fixed the bugs, added functionality for Opera and Internet Explorer and even added features for adding multiple CSS and JS files and 1 final callback (when all files are loaded) in a sweet and simple lazyloader-function. The result can be found here:

https://github.com/LukasBombach/Lazyloader

Worth knowing that now current versions of Chrome and Firefox fire the onload event on links.

var cssFile = document.createElement("link");cssFile.setAttribute("rel", "stylesheet");cssFile.setAttribute("type", "text/css");// Add event listenercssFile.onload = function(){ console.log('loaded'); }cssFile.setAttribute("href", 'pathToYour.css');document.getElementsByTagName("head")[0].appendChild(cssFile);

Edit: (Because of the possible not support WebKit)

So I'd rather recommend JQuery LOADER

$("a.button, input.button, button.button").Loader({    url: [        'core.css',        'theme.css',        'button.css'    ],    success: function() {        $(this).button();    }});

You can take a look at LazyLoad JavaScript library.

LazyLoad is a tiny (only 1,541 bytes minified), dependency-free JavaScript library that makes it super easy to load external JavaScript and (new in this version) CSS files on demand. It’s ideal for quickly and unobtrusively loading large external scripts and stylesheets either lazily after the rest of the page has finished loading or on demand as needed.

In addition to CSS support, this version of LazyLoad also adds support for parallel loading of multiple resources in browsers that support it. To load multiple resources in parallel, simply pass an array of URLs in a single LazyLoad cal