简单其实不简单

用JS动态监听CSS加载

周五时有个工作时需求等CSS加载完后后再执行些JS代码，但发现使用onload在Firefox chrome下不行但IE8下却可以。

第一次发现IE也有让我省心的时候啊！

问谷大叔得知研究这问题的人还挺多的：

• 在射雕的lab中发现有两个测试 load js css css preload，讲得挺多的，而且在其seajs中已经运用上了，拜之~~
• 在国外一相当大的专业问答网站中找到相同问题，也有不少人给出了解答 javascript capturing load event on link。主要讲到两种方案：
  1. 使用settimeout循环判断不同浏览器中当CSS加载完或失败时的特性，射雕使用的方案也是这种，但特性有所不同；
  2. 方案挺有意思的，同时创建link、img标签并将CSS的URL同时赋于两个标签，用img标签的onerror事件做为加载监听器，但这种方案会产生两个请求，并且img标签所发出的请求会标注不支持gzip。
• 在 Cross Browser Stylesheet Preloading中也提供了一解决方案，但代码是基于mootools写的，最重要的一点是延时判断link标签的ownerNode或owningElement属性，没用过这两个属性，不懂！！！

继续问谷大叔找到关于ownerNode（返回节点与此相关联的样式表文件的。）以及owningElement（返回附加到元素节点上的属性）的定义。

this.link.id = this.getID(); // 创建link标签时给标签加上了ID属性
// 注意 这里的file = document.styleSheets[0]; 或 document.getElementsByTagName('link')[0].sheet;
var owner = file.ownerNode ? file.ownerNode : file.owningElement;
if(owner && owner.id == this.getID()) {
    this._onready();
    return;
}

并且看到了对link标签事件支持情况：

IE6-IE9、opera  都支持link标签的 onload  onerror事件
firefox chrome  safari 都不支持link标签的 onload  onerror事件