1,105,534 Community Members

LINK element and "onload" event

Member Avatar
Elbudster
Newbie Poster
14 posts since Sep 2004
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

Hello,

For a web app I am building, I am dynamically loading additional JavaScript and CSS files on demand (after the initial page load). According to the html specs, both the <script> and <link> elements support the onload event. I can get <script> tags to load and fire an onload event, but I am having issues with CSS link elements... Only IE seems to acknowledge a <link>'s onload event (since when does IE follow the rules??).

Here is some example code that works in IE, but fails in other browsers...

var link = document.createElement("link");
  
link.onload = function() {
  alert("yay!");
}

link.type = "text/css";
link.rel = "stylesheet";
link.href = "somefile.css"; // change this to an actual CSS file

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

Any ideas about how to achieve a cross-browser compatible solution to this? Please don't question the reasons for such an implementation, this example is stripped down to the minimum for example purposes.

Member Avatar
matsko
Newbie Poster
1 post since Mar 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

You need to setup a timed interval and compare the node properties.

Here is how you do it:
http://yearofmoo.com/2011/03/cross-browser-stylesheet-preloading/

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article