本文共 1820 字，大约阅读时间需要 6 分钟。
动态加载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中的源码：
< 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://jymqj.baihongyu.com/