在进行了一些研究并写下我的答案之后，我偶然发现了该链接，该链接解释了您需要了解的有关CSS的所有信息，何时加载CSS以及如何检查CSS。
实际上，所提供的链接对它的解释很好，以至于我在其中添加了一些引用以供将来参考。
如果您好奇，我的答案将是＃2和＃4的变体。
何时真正加载样式表？
…
顺便说一句，让我们看看这里有什么。
// my callback function // which relies on CSS being loaded functionCSSDone() { 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 arriveshead.appendChild(link);魔术部分的选项，从容易到荒谬
- 听link.onload
- 收听link.addEventListener（’load’）
- 听link.onreadystatechange
- setTimeout并检查document.styleSheets中的更改
- 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
