The only crossbrowser solution for this issue seems to check the document.styleSheets array to see if css has been loaded or not in an interval and set flags. So the solution is is;
var module_loaded=false;
function load_css () {
var css_link = "domain/path/css"
var css_file = document.createElement("link");
css_file.rel = "stylesheet";
css_file.type = "text/css";
css_file.href = css_link;
var loaded = false;
if (css_file.readyState) {
css_file.onreadystatechange = function () {
if (css_file.readyState === "loaded" || css_file.readyState === "complete") {
css_file.onreadystatechange = null;
loaded = true;
load_module();
}
};
} else {
css_file.onload = function () {
loaded = true;
load_module();
};
}
document.getElementsByTagName("head")[0].appendChild(css_file);
var ti = setInterval(function() {
if (module_loaded) {
loaded = true;
clearInterval(ti);
}
if (!loaded) {
for (var i = 0 ; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].href == css_link) {
loaded = true;
clearInterval(ti);
load_module();
}
}
}
}, 100);
}
I set module_loaded to true if load_module() function is called.