Loading jQuery plugins and multiple scripts best practices

Question

I'm currently looking for a way to load in multiple scripts/plugins without having a laundry list listed out in the header.

To simply have a load.js have everything load in would be very elegant to me.

$(function() {
    var scripts = ['scripts/jquery1.5.js','scripts/easing.js','scripts/scroll.js','scripts/main.js'];

    for(var i = 0; i < scripts.length; i++) {
        $.getScript(scripts[i]);
    }
})

I currently have something like this but can't get it to work for some reason. Any ideas?

Jamie Treworgy · Accepted Answer · 2011-03-01 22:55:03Z

7

Have you looked at head.js?

answered Mar 1, 2011 at 22:55

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

feronovak · Accepted Answer · 2011-03-24 01:43:48Z

3

Here is my conclusion for head.js, I have done some benchmarks myself:

http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html

It is subjective opinion and benchmarks are not by any means scientific.

answered Mar 24, 2011 at 1:43

feronovak

2,6976 gold badges36 silver badges55 bronze badges

Comments

disease · Accepted Answer · 2013-01-10 14:54:50Z

This is my solution : check if file is added (stored in array) and then load one file after another. Works perfectly!

var filesadded = "" //list of files already added
function loadJSQueue(array, success) {

    if (array.length != 0) {
        if (filesadded.indexOf("[" + array[0] + "]") == -1) {
            filesadded += "[" + array[0] + "]" //List of files added in the form "[filename1],[filename2],etc"

            oHead = document.getElementsByTagName('head')[0];
            var oScript = document.createElement('script');
            oScript.type = 'text/javascript';
            oScript.src = array[0];
            array.shift();
            oScript.onreadystatechange = function () {
                if (this.readyState == 'complete') {
                    loadJSQueue(array, success);
                }
            }

            oHead.appendChild(oScript);
        }
        else {
            array.shift();
            loadJSQueue(array, success);
        }

    }
    else {
        success();
    }
}

call it with

    loadJSQueue(["../../JavaScript/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js",
                "../../JavaScript/plupload/js/plupload.js",
                "../../JavaScript/plupload/js/plupload.html4.js"
                ], function(){alert("success");})

Frankey · Accepted Answer · 2013-05-21 19:45:45Z

0

     loadScripts(['script1.js','script2.js'], function(){ alert('scripts loaded'); }    

     function loadScripts(scripts, callback){

                var scripts = scripts || new Array();
                var callback = callback || function(){};

                for(var i = 0; i < scripts.length; i++){
                (function(i) {
                    $.getScript(scripts[i], function() {

                      if(i + 1 == scripts.length){
                        callback();
                      }
                    });
                  })(i);  
                }
           }

answered May 21, 2013 at 19:45

Frankey

3,75531 silver badges26 bronze badges

Collectives™ on Stack Overflow

Loading jQuery plugins and multiple scripts best practices

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related