要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，我们可以直接通过onload方法来处理CSS加载完成以后的处理：

// 代码节选至seajsfunction 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!    }}

很遗憾，这次在其他的浏览器中，想判断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的另一个解决方案

/* * Copyright (C) 2010 Diego Perini * All rights reserved. * * cssready.js - CSS loaded/ready state notification * * Author: Diego Perini 
     
       * Version: 0.1 * Created: 20100616 * Release: 20101104 * * License: *  http://www.jb51.net * Download: *  http://javascript.nwbox.com/cssready/cssready.js */function cssReady(fn, link) {  var d = document,  t = d.createStyleSheet,  r = t ? 'rules' : 'cssRules',  s = t ? 'styleSheet' : 'sheet',  l = d.getElementsByTagName('link');  // passed link or last link node  link || (link = l[l.length - 1]);  function check() {    try {      return link && link[s] && link[s][r] && link[s][r][0];    } catch(e) {      return false;    }  }  (function poll() {    check() && setTimeout(fn, 0) || setTimeout(poll, 100);  })();}
     

其实，如果你读过jQuery的domready事件的判断的代码，原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。