如何确定CSS是否已加载？

Question

我怎么能断言页面的CSS已成功加载并在Watin 2.1中应用它的样式？

Answer 1

在做了一些研究并写了我的答案之后,我偶然发现了这个链接,它解释了你需要知道的关于CSS的所有内容,加载时以及如何检查它.

所提供的链接解释得非常好,事实上,我正在添加一些引用以供将来参考.
_{如果你很好奇,我的答案将是#2和#4的变体.}

什么时候样式表真的加载了？

...

有了这个,让我们看看我们在这里有什么.

// 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检查样式

第五个选项太疯狂了,假设你可以控制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

Answer 2

@ShadowScripter排列的文章有更新.据称这种新方法适用于所有浏览器,包括FF.

var style = document.createElement('style');
style.textContent = '@import "' + url + '"';

var fi = setInterval(function() {
  try {
    style.sheet.cssRules; // <--- MAGIC: only populated when file is loaded
    CSSDone('listening to @import-ed cssRules');
    clearInterval(fi);
  } catch (e){}
}, 10);  

document.getElementsByTagName('head')[0].appendChild(style);