Detecting when CSS has loaded

Detecting when CSS has loaded


Hi,
I've been doing some research into how browsers load CSS files and how
they impact on the parsing of script.
A problem I'm having is reading styles of an element, but getting
incorrect values as the script is (sometimes) running before the
stylesheets have loaded.
When Firefox & IE encounter a <script>, they wait for any currently
loading CSS to load and apply before executing the script. However,
Firefox won't do this if the CSS has been added to the document via
appendChild.
Opera and Webkit do not wait for CSS to load before executing script.
I've been looking for ways to detect when CSS has loaded. This is easy
if you know the contents of the file, just add an element to the page
and poll for an expected style. It's trickier if you don't know the
rules that are going to be applied...
http://code.google.com/p/ajaxsoft/source/browse/trunk/xLazyLoader/jquery.xLazyLoader.js
xLazyLoader almost solves the problem, except when it comes to CSS
files that are from another domain. Checking linkElement.sheet.cssRule
throws a cross domain security error in Firefox.
I understand a "cssReady" event or similar has been attempted in
jQuery before, was it abandoned for this reason? Also, since
xLazyLoader is being included in jQuery 1.4, does that mean this issue
has been solved?
Cheers,
Jake.