如何判断CSS是否已经加载？

我如何断言页面的 CSS 已在 Watin 2.1 中成功加载并应用其样式？

在做了一些研究并写下我的答案之后，我偶然发现这个链接 http://www.phpied.com/when-is-a-stylesheet-really-loaded/这解释了您需要了解的有关 CSS、CSS 何时加载以及如何检查它的所有信息。

The link provided explains it so well, in fact, that I'm adding some quotes from it for future reference.
_{If you're curious, my answer was going to be #2 and a variation of #4.}

样式表什么时候真正加载？ http://www.phpied.com/when-is-a-stylesheet-really-loaded/

...

抛开这些，让我们看看这里有什么。

// my callback function 
// which relies on CSS being loaded function
CSSDone() {
    alert('zOMG, CSS is done');
};

// load me some stylesheet 
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
    head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.type = "text/css"; 
link.rel = "stylesheet";
link.href = url;

// MAGIC 
// call CSSDone() when CSS arrives
head.appendChild(link);

神奇部分的选项，从简单到荒谬排序

1. 听 link.onload
2. 监听 link.addEventListener('load')
3. 听 link.onreadystatechange
4. setTimeout 并检查 document.styleSheets 中的更改
5. setTimeout 并检查您创建但使用新 CSS 进行样式设置的特定元素的样式更改

第 5 个选项太疯狂了，它假设你可以控制 CSS 的内容，所以忘记它吧。另外，它会在超时时检查当前样式，这意味着它将刷新回流队列，并且可能会很慢。 CSS 到达的速度越慢，回流就越多。所以，真的，忘记它吧。

那么如何实施这个魔法呢？

// MAGIC 

// #1   
link.onload = function () {
    CSSDone('onload listener');
};   

// #2   
if (link.addEventListener) {
    link.addEventListener('load', function() {
        CSSDone("DOM's load event");
    }, false);   
};   

// #3   
link.onreadystatechange = function() {
    var state = link.readyState;
    if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone("onreadystatechange");
    }   
};

// #4   
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        // needs more work when you load a bunch of CSS files quickly
        // e.g. loop from cssnum to the new length, looking
        // for the document.styleSheets[n].href === url
        // ...

        // FF changes the length prematurely :(
        CSSDone('listening to styleSheets.length change');
        clearInterval(ti);
    }   
}, 10);

// MAGIC ends