Question

I want to execute some code after the document is ready AND all script loading is complete. I use head.js to load the scripts:

$(document).ready(function () {
    head.js("script1.js", "script2.js", function() {
        // code to execute
    });
});

Doing it this way makes starting to load the scripts wait for $(document).ready(). It seems like it would be better to start loading the scripts as soon as possible to avoid a performance drop.

Is there a better way to make sure the document AND the scripts are fully loaded prior to executing a block of code?

Answer 1

It’s better to swap the code around.

head.js("script1.js", "script2.js", function() {
    $(document).ready(function () {
        // code to execute
    });
});

the scripts start loading immediately, then when they are done, they wait until the document is ready and then begin executing.

It would be even better if you moved the script to before the closing body tag and removed the domready handler all together.