jQuery dynamic CSS loading weird behavior

Question

The app I am working on requires dynamic loading of CSS and JS, right now the solution is as follows:

myapp.loadCss = function(css){
       $("head").append("<link>");
       cssDom = $("head").children(":last");
       cssDom.attr({rel:  "stylesheet",
                 type: "text/css",
                 href: css
                });  
}

myapp.loadJs = funciton(js){
...
//$.ajax call is used in synchronized mode to make sure the js is fully loaded 
}

}

When some widgets need to be load, the usual call with be

myapp.loadCss('/widgets/widget1/css/example.css');
myapp.loadJs('/wiggets/widget1/js/example.js');

The weird thing is that once a while (1 out of 10 or 20), the newly created dom elements from example.js will not be able to get its CSS from example.css, it seems however my loadCss method does not load the CSS in a synchronized mode? I have tried to replace my loadCss with the the following code:

myapp.loadCss(css){
 $('<link href="' + css + '" rel="stylesheet" type="text/css" />').appendTo($('head'));

}

It seems to be OK then (I refreshed the webpage a hundred times for verification :-( ) But unfortunately this method failed in IE(IE7, not tested in IE6, 8)

Is there any better solution for this?

Answer 1

First of all you can write

 cssDom = $("head").append("<link>");

This can help because potentially two calls of your script can be started almost in same time and as result you will add two tags and only one of them will be changed(twice) so one css will be missing.

About IE7 - from my own experience the most common error - adding comma for the last element in dynamic object

var zzz = {a:'a', b:'b',}

Answer 2

Hi,

Im Stuck on the same issue. but in my case im using Jquery Depends plugin to load js and css for me. it works like a charm in firefox. but in IE the the <link> tag is getting attached to the head, and the <div> get attached to the body of the dom.

but the styles doesnt get applied to the newly added tags.

listening on this.

Praveen Gunasekara

Answer 3

Have exactly the same problems with IE7/8 .