Dynamic CSS Loading

[prabirshrestha]

beging able to load css dynamically would also be a great addition to LABjs. might be could be add as an extension to LABjs incase some of them don't want this feature.

[getify]

many people have asked for this before. i have no plans to add it to LABjs at the moment, and here's why:

1. actually determining if a dynamically loaded CSS file has finished loading is actually quite complicated and challenging to do cross-browser. The "load" events don't fire as one would hope/expect. so adding such support would add a non-trivial size to LABjs (or to a LABjs wrapper/plugin).

2. I actually find it very rare that people need to sequence the loading (and "executing") of CSS in between the loading of other scripts. It's very common that someone says "I want to load these scripts and this CSS file" for widgets and things, but very rare that someone says "I need to load this script, THEN this CSS file, THEN this other script .... " LABjs is specifically for loading things in parallel and sequencing their execution for dependency sake. So it makes much less sense to mix in CSS loading (which usually doesn't need sequencing) into the API. Would be very much more confusing.

3. Just the dynamic loading portion (not the load-detection or execution sequencing) of CSS files is actually very easy to do. The code is like this:

   var link = document.createElement("link");
   link.setAttribute("rel","stylesheet");
   link.setAttribute("type","text/css");
   link.setAttribute("href","http://link/to/file.css");
   document.getElementsByTagName("head")[0].appendChild(link);

Because that code is so trivially easy for people to do themselves if they want to load CSS dynamically, I don't think it belongs in a tool which is designed for the specific purpose of performance-efficient script loading.

All this having been said, some other loaders do support CSS loading... like Dominoes and RequireJS.

[prabirshrestha]

is there a way to know when the css has been loaded. so that i can make the div visible only when the callback has been fired.

[getify]

The most straightforward way is to have a CSS style in the stylesheet and then to poll every 25 ms and look for the computed style of some element to see if that style has been applied. Obviously that's kind of ugly, but I've done that successfully before.

If you look in the source code for Dominoes there's a more complex solution that tries to actually detect if the stylesheet itself is loaded as a node in the DOM, and uses some interesting security behavior in various browsers.

Either way, it's not straightforward or easy. That's one of the reasons I've not put it into LABjs. The complexity is not worth the payoff.

[getify]

closing (for now)