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