動(dòng)態(tài)加載css都是通過DOM操作新增一個(gè)link標(biāo)簽來實(shí)現(xiàn)，常見的代碼如下：
var node = document.createElement("link");
node.setAttribute("rel","stylesheet");
node.setAttribute("type","text/css");
node.setAttribute("href","xx.css");
document.body.appendChild(node);
但是要判斷這個(gè)css文件是否加載完畢，各個(gè)瀏覽器的做法差異比較大，今天在讀
seajs 源代碼時(shí)想到里面應(yīng)該能找到我想要的代碼，下面是改編自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。其他瀏覽器需要通過定時(shí)任務(wù)來判斷是否加載完畢。
照著這個(gè)思路，推薦大家去讀讀jQuery源碼，domready事件的判斷，原理也類似，每個(gè)瀏覽器的處理細(xì)節(jié)不一樣。
seajs源碼：
http://modules.seajs.com/seajs/1.0.1/sea-debug.js(完)