Javascript multiple Dynamic Insertion

Question

When we do dynamic insertion for javascript, sometimes order matters. We sometimes solve this by using onload property; however, if there are many external javascripts, and those scripts has to be loaded in order, then what should we do?

I solved this problem by recursively defined onload functions; however not so sure about efficiency... since this is a script, I think it does lazy eval.... Any help?

//recursively create external javascript loading chain
//cautiously add url list according to the loading order
//this function takes a list of urls of external javascript
function loadScript(url) {
  if( url.length == 0) {
    //final function to execute
    return FUNCTION;
  }

  var f = function(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url.pop();

    //recursion
    script.onload = loadScript(url) ;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
  return f;
}

function loadScripts(urls) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = urls.pop();
  script.onload = loadScript(urls) ;
  document.getElementsByTagName("head")[0];.appendChild(script);
}

loadScripts(["aaa.js","bbb.js","ccc.js"]);

Thank you!

-sorry for confusing you.. I added a function that actually calls loadScript(). (I checked this works.. )

Answer 1

The context for how you use this loadScript function escapes me here and looks a lot more confusing than it probably needs to be.

If you want to load scripts in order, why don't you just make a list of them in the order you want to load them, load the first one. When it completes loading, update your list to remove the one that just loaded and load the next one, etc...

Here's some code that could do that and should work with either of the script load detection mechanisms that browsers use and will wait until the onload function is called (or readystatechange notification) until loading the next script:

function loadScriptsSequential(scriptsToLoad) {

    function loadNextScript() {
        var done = false;
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.onreadystatechange = function () {
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                scriptLoaded();
            }
        }
        script.onload = scriptLoaded;
        script.src = scriptsToLoad.shift(); // grab next script off front of array
        head.appendChild(script);

        function scriptLoaded() {
            // check done variable to make sure we aren't getting notified more than once on the same script
            if (!done) {
                script.onreadystatechange = script.onload = null;   // kill memory leak in IE
                done = true;
                if (scriptsToLoad.length != 0) {
                    loadNextScript();
                }
            }
        }
    }

    loadNextScript();
}

var scripts = [a,b,c,d,e,f];        // scripts to load in sequential order
loadScriptsSequential(scripts);

As others have mentioned, there are very helpful frameworks (like jQuery) that have built-in functions for loading scripts.

Answer 2

Why don't you just add the links to your javascript in the right order and then start using a javascript library like jQuery?

Answer 3

There is a "detecting load completion" method you could use. take a look at this link that demo's it.