在我看来，这是使用 IMG 标记及其 onerror 事件的此问题的更好解决方案。此方法将完成工作而无需循环、执行扭曲的样式观察或在 iframe 中加载文件等。此解决方案在加载文件时正确触发，如果文件已被缓存（具有讽刺意味的是，这比大多数 DOM加载事件处理缓存的资产）。这是我博客上的一篇解释该方法的帖子- Back Alley Coder 帖子- 我只是厌倦了没有合法的解决方案，享受吧！

var loadCSS = function(url, callback){
    var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;

    document.getElementsByTagName('head')[0].appendChild(link);

    var img = document.createElement('img');
        img.onerror = function(){
            if(callback) callback(link);
        }
        img.src = url;
}

对于 CSS 样式表（一般不是 LINK 元素），我使用手动间隔，通过戳它的规则长度。它适用于跨浏览器（AFAIT）。

try {
  if ( cssStylesheet.sheet && cssStylesheet.sheet.cssRules.length > 0 )
    cssLoaded = 1;
  else if ( cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText.length > 0 )
    cssLoaded = 1;
  else if ( cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0 )
    cssLoaded = 1;
}
catch(ex){}

在上面的代码中，cssStylesheet 是 DOMElement。

即使您添加了内联：

<link rel="stylesheet" type="text/css" href="foo.css" onload="alert('xxx')"/>

它不会在Firefox火，因为没有一个onload事件link的元素。（它将在 IE 中工作）

所有功劳都归功于上面的 Tobiasz，但这里有一些关于他所说的话的扩展：

function _cssIsLoaded(cssStylesheet) {
    var cssLoaded = 0;
    try {
        if ( cssStylesheet.sheet && cssStylesheet.sheet.cssRules.length > 0 )
            cssLoaded = 1;
        else if ( cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText.length > 0 )
            cssLoaded = 1;
        else if ( cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0 )
            cssLoaded = 1;
        }
        catch(ex){ }

        if(cssLoaded) {
            // your css is loaded! Do work!
            // I'd recommend having listeners subscribe to cssLoaded event, 
            // and then here you can emit the event (ie. EventManager.emit('cssLoaded');
        } else {
            // I'm using underscore library, but setTimeout would work too
            // You basically just need to call the function again in say, 50 ms
            _.delay(_.bind(this._cssIsLoaded, this), 50, cssStylesheet);
        }
}

你会用类似的东西（使用jquery）来调用它：

var link = $("<link>");
link.attr({
    type: 'text/css',
    rel: 'stylesheet',
    href: sheet
});

$("head").append(link);
// link.get(0), because you want the actual element, not jQuery-wrapped element
self._cssIsLoaded(link.get(0));

link.innerHTML、link.styleSheet 和 cssRules 都是不错的方法，但它们不适用于属于原始域之外的域的样式表（因此跨站点样式表加载失败）。当使用子域与域（例如 www）或使用静态 CNS 时，这可能非常出乎意料。这很烦人，因为元素没有同源限制。

这是一个解决方案，它对支持它的浏览器（IE 和 Opera）使用 onload 方法，然后对不支持它的浏览器使用定时间隔，并比较 ownerNode 和 owningElement 节点以检查样式表何时进入DOM。

http://www.yearofmoo.com/2011/03/cross-browser-stylesheet-preloading.html