views:

31

answers:

0

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);
    }
}

});