要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，可以直接通过onload方法来处理CSS加载完成以后的处理：
很遗憾，这次在其他的浏览器中，想判断CSS是否加载完成就不是那么方便了，FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕。
而且需要使用setTimeout间隔事件轮询：
// 代码节选至seajs
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);
}
}
setTimeout(function() {
poll(node, callback);
}, 0);
SeaJS给出的完整的处理：
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);
}
}
// 我的动态创建LINK函数
function createLink(cssURL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],
linkTag = null;
if(!cssURL){
return false;
}
linkTag = document.createElement('link');
linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('charset',(charset || 'utf-8'));
linkTag.setAttribute('media',(media||'all'));
linkTag.setAttribute('type','text/css');
linkTag.href = cssURL;
head.appendChild(linkTag);
}
function loadcss(){
var styleNode = createLink('/wp-content/themes/BlueNight/style.css');
styleOnload(styleNode,function(){
alert("loaded");
});
}
在看到seajs的代码时，想到Diego Perini的另一个解决方案：
其实，如果你读过jquery的domready事件的判断的代码，原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。
还有，Fackbook则是通过在动态创建的css样式中包含一个固定的样式，例如#loadcssdom，loadcssdom就是一个高度为1px样式。然后动态创建一个DOM对象，添加这个loadcssdom样式。
然后也是setTimeout轮询loadcssdo是否已经有1px的高度了。
可以参考下：
《CSSP: Loading CSS with Javascript – and getting an onload callback.》
而《JavaScript Patterns》的作者Stoyan则在他的博客里，比较详细的说明了《When is a stylesheet really loaded?》。