best way of dynamic script loading

Question

I need to load some js files dynamically and sequentially(i.e. second script loads after load complete of first one, third after second and so on).

Question: how to

Answer 1

RequireJS:

... is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Says it is IE 6+, Firefox2 2+, Safari 3.2+, Chrome 3+ and Opera 10+ compatible.

Answer 2

I think what you need is jQuery.getScript

The function takes a URL and a success method with which you can chain loading of scripts and therefore load them sequentially:

jQuery.getScript( url, function() { 
  jQuery.getScript( url2, function() 
    {/*... all 2 scripts finished loading */}
  );
});

Answer 3

Here is my snippet for loading several scripts using jQuery.getScript();

function getScripts(inserts, callback)
{
    var nextInsert = inserts.shift();
    if (nextInsert != undefined)
    {
        console.log("calling"+nextInsert);
    jQuery.getScript(nextInsert, function(){ getScripts(inserts, callback); })
            .fail(function(jqxhr, settings, exception){alert("including "+nextInsert+" failed:\n" +exception)});
    }
    else
    {
        if (callback != undefined) callback();
    }
};

Usage:

var includes = [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
];

getScripts(includes, function(){ /* typically a call to your init method comes here */; });

Answer 4

In Chrome, we can use onload and onerror to replace onreadystatechange.