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

There are open source js which will ease your problem. You can use LABJS or RequreJS plugins.

Script loaders like LABJS, RequireJS will improve the speed and quality of your code. Additionally it will load scripts dynamically.

Answer 2

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 3

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
});