如何判断link标签css文件加载完毕

动态加载css都是通过DOM操作新增一个link标签来实现，常见的代码如下：

var node = document.createElement("link");

node.setAttribute("rel","stylesheet");

node.setAttribute("type","text/css");

node.setAttribute("href","xx.css");

document.body.appendChild(node);

但是要判断这个css文件是否加载完毕，各个浏览器的做法差异比较大，今天在读seajs 源代码时想到里面应该能找到我想要的代码，下面是改编自seajs中的源码：

<script type="text/javascript">

function styleOnload(node, callback) {

// for IE6-9 and Opera

if (node.attachEvent) {

node.attachEvent('onload', callback);

// NOTICE:

// 1. "onload" will be fired in IE6-9 when the file is 404, but in

// this situation, Opera does nothing, so fallback to timeout.

// 2. "onerror" doesn't fire in any browsers!

}

// polling for Firefox, Chrome, Safari

else {

setTimeout(function() {

poll(node, callback);

}, 0); // for cache

}

}

function poll(node, callback) {

if (callback.isCalled) {

return;

}

var isLoaded = false;

if (/webkit/i.test(navigator.userAgent)) {//webkit

if (node['sheet']) {

isLoaded = true;

}

}

// for Firefox

else if (node['sheet']) {

try {

if (node['sheet'].cssRules) {

isLoaded = true;

}

} catch (ex) {

// NS_ERROR_DOM_SECURITY_ERR

if (ex.code === 1000) {

isLoaded = true;

}

}

}

if (isLoaded) {

// give time to render.

setTimeout(function() {

callback();

}, 1);

}

else {

setTimeout(function() {

poll(node, callback);

}, 1);

}

}

function loadcss(){

var node = document.createElement("link");

node.setAttribute("rel","stylesheet");

node.setAttribute("type","text/css");

node.setAttribute("href","xx.css");

document.body.appendChild(node);

styleOnload(node,function(){

alert("loaded");

});

}

</script>

单靠onload事件是不解决问题的。FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕，IE6-9以及opera可以利用onload。其他浏览器需要通过定时任务来判断是否加载完毕。

照着这个思路，推荐大家去读读jQuery源码，domready事件的判断，原理也类似，每个浏览器的处理细节不一样。

seajs源码：http://modules.seajs.com/seajs/1.0.1/sea-debug.js