如何确定CSS是否加载？

在做了一些研究和写作我的回答后,我偶然发现了 this link,它解释了你需要了解的关于CSS的一切,当它被加载,以及如何检查它.

提供的链接很好地解释了这一点,实际上我添加了一些引用来作为参考.
如果你好奇,我的答案将是#2,而#4的变体.

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);

魔法部分的选项,从漂亮而容易到可笑的排序

>听link.onload
>听link.addEventListener(‘load’)
>听link.onreadystatechange
> setTimeout并检查document.styleSheets中的更改
> 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