Question

I created this script for a core.js file for my client’s website and I want to dynamically load a few javascript libraries from that core.js file. However, javascript libraries require that you load that library first, then use the rest of your script, because you have to define your libraries object before calling it, doh. So I have this very simple script to dynamically load a file, but I want to know if there’s a method to make sure that it loads it in priority ahead of the core.js file. Here’s the current script:

(function() {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "http://modernizr.com/downloads/modernizr-latest.js");
    if(typeof script != "undefined") {
        document.getElementsByTagName("head")[0].appendChild( script );
    }
})();

And in the debugger, you see:

Of course, it’s going to load the dynamic file ahead of the core file, but I was wondering if there was a way to specify the line on the document for which to load the modernizr file? Otherwise, I can’t use Modernizr, even though I have loaded it.

Obviously, I can’t use jQuery, because I want to load that, too.

Answer 1

You can respond to the loading of a dynamically-loaded JavaScript resource (or any resource, for that matter — image, iframe, video, etc.) with a load event listener. The easiest way to do it here would be:

(function() {
    var script = document.createElement("script");
    ...
    script.onload = function() {
        // this will run later, when the script loads
        // in this function you can safely use Modernizr
    }
})();