javascript: capturing load event on LINK

Question

hello everyone,

i'm trying to attach an event handler to the load event of a link tag, to execute some code after a stylesheet has loaded.

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)

i have tried onreadystatechange as well

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

unfortunately neither approach results in an alert being triggered.. Furthermore, new_element.onload is null after registering a handler for the 'load' event with addEventListener.. is that normal?

thanks, andrew

ps: i may not use any framework in solving this

Answer 1

An href does not have a load event you need to apply your stuff as the page itself loads e.g.

window.onload = function(){
//code here

}

use the function on this page: http://www.dustindiaz.com/top-ten-javascript/

to add the event the body element (in line would be )

Answer 2

Even if you add an inline:

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

It won't fire in FireFox as there isn't an onload event for link elements. (It will work in IE)

Answer 3

For CSS stylesheets (not LINK elements in general) i'm using manual interval, by poking it's rules length. It works 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){}

In code above, the cssStylesheet is DOMElement.