dynamic script loader in JS

Question

How can i write dynamic MULTIPLE script loader with complete handler like google

google.load("http://script1");
google.load("http://script2");
google.setOnLoadCallback(function(){});

thanks

Answer 1

My advise is not to bother with script loading yourself, unless you take a look at how some frameworks do it because there can be security risks for your application with that sort of thing. In fact, I would redirect you to JQuery instead as it does have that functionality implemented (see here).

Answer 2

I wrote like that

myApp.Loader = function(){
    var queries = [];
    var q = 0;
    var p = 0;
    var started = false;
    var _callback = function(){};

    var start = function(){
        if(queries.length > 0 && !started){
            started = true;
            load(queries.shift());
        } else if(queries.length > 0 && started){
            load(queries.shift());
        } else if(queries.length == 0 && started){
            started = false;
            if(q > 0 && q == p){
                callback();
            }
        }
    };

    var load = function(fullUrl){
        $.getScript(fullUrl, function() {
            p++;
            start();
        });
    };

    var callback = function(){
        _callback();
    };

    this.setCallback = function(fnc){
        _callback = fnc;
        if(q > 0 && q == p){
            callback();
        }
    };

    this.addQuery = function(query){
        queries.push(query);
        q++;
        if(!started) {
            start();
        }
    };

    return this;
}

var Loader = new myApp.Loader();

myApp.load = function(fullUrl){
    Loader.addQuery(fullUrl);
}

myApp.setOnLoadCallback = function(fnc){
    Loader.setCallback(fnc);
}

and call it

myApp.load("http://script1");
myApp.load("http://script2");
myApp.load("http://script3");
myApp.setOnLoadCallback(function(){
    // complete script load handling
});