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
An href does not have a load event you need to apply your stuff as the page itself loads e.g.
use the function on this page: http://www.dustindiaz.com/top-ten-javascript/
to add the event the body element (in line would be )
All credit goes to Tobiasz up above, but here’s a little expansion on what he said:
You’d call it with something like (using jquery):
Even if you add an inline:
It won’t fire in FireFox as there isn’t an
onload
event forlink
elements. (It will work in IE)For CSS stylesheets (not LINK elements in general) i’m using manual interval, by poking it’s rules length. It works crossbrowser (AFAIT).
In code above, the cssStylesheet is DOMElement.
Here’s what is, in my opinion, a better solution for this issue that uses the IMG tag and its onerror event. This method will do the job without looping, doing contorted style observance, or loading files in iframes, etc. This solution fires correctly when the file is loads, and right away if the file is already cached (which is ironically better than how most DOM load events handle cached assets). Here’s a post on my blog that explains the method – Back Alley Coder post – I just got tired of this not having a legit solution, enjoy!
This method suits me better.
Nice shot Matt. I’ve created this helper with your comment.
Usage:
The link.innerHTML, link.styleSheet and cssRules are all good approaches, but they do not work for stylesheets that belong to a domain outside of the origin domain (so cross-site stylesheet loading fails). This can be pretty unexpected when a subdomain vs a domain is used (www for example) or a static CNS is used. And its pretty annoying since elements have no same-origin restriction.
Here’s a solution that that uses the onload method for browsers that support it (IE and Opera), but then uses a timed interval for browsers that do not and compares the ownerNode and owningElement nodes to check to see when the stylesheet has made its way into the DOM.
http://www.yearofmoo.com/2011/03/cross-browser-stylesheet-preloading.html
This function has held up on all browsers as well as in both cross domain and same domain situations, also this handles the injection of javascripts as well as stylesheets.
E.g. Android browser doesn’t support “onload” / “onreadystatechange” events for element: http://pieisgood.org/test/script-link-events/
But it returns:
So, my solution is to detect Android browser from userAgent and then wait for some special css rule in your stylesheet (e.g., reset for “body” margins).
If it’s not Android browser and it supports “onload” event- we will use it:
Demo: http://codepen.io/malyw/pen/AuCtH