loading javascript file after jquery.ready

Question

I want to load a javascript file at the end of jquery.ready so that the code in my ready handler doesn\'t have to wait to execute until this large javascript file is loaded.

Answer 1

If your application is new and not too far along yet, you could get a lot out of using LABjs for that purpose. It allows all your script files to load in parallel or, even, at any other time that you prefer (on demand). http://labjs.com/

Answer 2

Use .getScript: http://api.jquery.com/jQuery.getScript/

$(document).ready(function(){
    ...
    ...
    $.getScript("largejs.js");
});

Answer 3

The quoted "</script>" tag will actually end your block of JavaScript prematurely.

I'd use this method:

var newScript = $(document.createElement('script'));
newScript.src="/largejs.js"

Answer 4

solution will check jquery already loaded, if not it will check after some time here 500ms and loop until it found jquery

function loadScriptAfterJQueryReady(jsFile) {
    setTimeout(function () {
        var loadScript=true;
        if (typeof jQuery == 'undefined') {
            if (typeof window.jQuery == 'undefined') {
                /* jQuery is not loaded */
                loadScript=false;
                loadScriptAfterJQueryReady(jsFile);
            }else{
                /* jQuery is loaded */
            }
        } else {
            /* jQuery is loaded */
        }
        if(true==loadScript) jQuery.getScript(jsFile);
    }, 500);
}
loadScriptAfterJQueryReady("my.js");