如何判断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