CODEWITHSUNDEEP
javascriptjquery
Kyle
Kyle

Reputation: 22035

loading javascript file after jquery.ready

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.

My jquery.ready code doesn't rely on this javascript file at all.

Would this be a good way to do that?

$(function(){
    ...
    ...      
    $('head').append('<script type="text/javascript" src="/largejs.js"></script>');
});

Upvotes: 11

Views: 24087

Answers (4)

Shahadat Hossain Khan
Shahadat Hossain Khan

Reputation: 737

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

Upvotes: 3

David Droddy
David Droddy

Reputation: 53

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/

Upvotes: 0

Emil Vikstr&#246;m
Emil Vikstr&#246;m

Reputation: 91942

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

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

Upvotes: 29

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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"

Upvotes: 1

Related Questions