Hey,
As I've understood the browser will freeze all DOM rendering when it sees a script tag and only continues once it has processed it. When I inserted an external javascript file (typekit) directly in the HTML this seemed to be the case, but now that I'm including it dynamically it causes a repaint of the window. Is it possible fixing this issue?
I'm playing around with YUI3 and yes I know the Y.Get.script works as well but I wanted to try it without the framework as well. Using the framework function causes the same sort of repaint.
Live Example:
With Loader: http://oxy.fi/oxy/ (and oxy/without_loader.php, not allowed to post more than one link)
YUI().use(function(Y) {
var modules = {
modernizr: {
head: true,
js: ["scripts/modernizr-1.5.min.js"]
},
typekit: {
head: true,
js: ["http://use.typekit.com/xxxxxxx.js"],
onSuccess: function () { try{ Typekit.load(); } catch (e) {} }
}
};
for(var index in modules) {
var module = modules[index],
css = module.css,
js = module.js;
delete module.js;
delete module.css;
if(module.head) {
var head = document.getElementsByTagName('head')[0],
i=0;
while(js[i]) {
var script = document.createElement("script");
script.type = "text/javascript",
script.src = js[i];
if(i === js.length-1 && module.onSuccess) {
script.onload = module.onSuccess;
}
head.appendChild(script);
i++;
}
} else {
var obj = Y.Get.script(js, module);
}
}
});