javascript:在LINK上捕获加载事件

我正在尝试将事件处理程序附加到链接标记的加载事件,以在加载样式表后执行某些代码.

new_element = document.createElement('link');
new_element.type = 'text/css';
new_element.rel = 'stylesheet';
new_element.href = 'http://domain.tld/file.css';
new_element.addEventListener('load', function() { alert('foo'); }, false);
document.getElementsByTagName('head')[0].appendChild(new_element)

我也试过onreadystatechange

new_element.onreadystatechange = function() { alert('foo'); }

不幸的是,这两种方法都没有导致触发警报.此外,在使用addEventListener注册'load'事件的处理程序后,new_element.onload为null.这是正常的吗？

谢谢,安德鲁

ps:我可能不会使用任何框架来解决这个问题

1> csuwldcat..：

---

在我看来,对于使用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;
}

---

IE和Opera不需要这种方法，它们已经支持了一段时间的链接标签onload。只需在基于Gecko和Webkit的浏览器中使用它即可。如果链接元素不支持onload，我将增强MooTools More的官方Asset方法以智能地使用此方法，这应该在我们即将发布的MooTools版本中。

2> Tobiasz Cudn..：

---

对于CSS样式表(一般不是LINK元素)我使用手动间隔,通过戳它的规则长度.它适用于crossbrowser(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.

---

这很好,除非您加载css跨域.如果您的CSS在CDN上,则由于跨域限制,cssRules不可用.另见http://www.phpied.com/when-is-a-stylesheet-really-loaded/