Load JS after JQuery is loaded

Question

Possible Duplicate:

how to check the script element load event accross browser without jquery

Waiting on JS class load from dynamic script loading

dynamic script loading synchronization

load and execute order of scripts

Waiting for a script object to load

I have included jQuery this way:

function loadScript(loc){
  var head = document.getElementsByTagName('head')[0];
  var file = document.createElement('script');
  file.src = loc;
  file.type = "text/javascript";
  head.appendChild(file)
}

loadScript("js/jquery.js")

Now the next script should be loaded the same way. But if it is loaded after the last line, I can't use jQuery, because it may not be finished with loading. So how to check, if the loading of jQuery is done? Can I do something like this?:

while (typeof jQuery == 'undefined')
  {
  wait...
  }

possible duplicate of [how to check the script element load event accross browser without jquery](http://stackoverflow.com/questions/12574549/how-to-check-the-script-element-load-event-accross-browser-without-jquery) or [dynamic script loading synchronization](http://stackoverflow.com/questions/774752/dynamic-script-loading-synchronization) — Bergi, Dec 11 '12 at 13:01
And no, you can't do something like that. It is not possible to do busy waiting in JavaScript, as it would not terminate and freeze the browser. Also, you never can be sure that the script declares a variable called "jQuery". — Bergi, Dec 11 '12 at 13:05
Check this related answer out: **[Load ordering of dynamically added script tags](http://stackoverflow.com/a/38840724/2247494)** — jherax, Aug 09 '16 at 17:20

score 8 · Accepted Answer · answered Dec 11 '12 at 13:11

The generally accepted method for loading a script dynamically is by creating the script element then appending to the DOM (as you do), but also to assign a callback function to detect when the script is loaded.

function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){
        // handle IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {
        // handle other browsers
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Usage:

loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", function(){
    // jquery is loaded
});

Your suggest worked for me. That way I don't have to say "wait until it's loaded". — Peter, Dec 11 '12 at 13:33
This is a great little snippet of code... especially when you're injecting via Adobe Target. I was having an issue where Slick Carousel was loading before jQuery. Great use case for something like this. — Chad, Jul 17 '17 at 23:48

score 0 · Answer 2 · answered Dec 11 '12 at 13:09

JS is single threaded for application use: If you create a infinite loop the whole page will just be stuck.

Typically you include JQuery before all the dependent libraries and libraries use DOM API from JQuery only after they receive the $(document).ready event.

score 0 · Answer 3 · answered Dec 11 '12 at 13:34

There are few loader out there. You can use them easily. ex. -

check this one http://labjs.com/documentation.php. The coding approach of this one looks similar to yours. You can write -

<script>
   $LAB
   .script("framework.js").wait()
   .script("plugin.framework.js")
   .script("myplugin.framework.js").wait()
   .script("init.js").wait();
</script>

see the wait()? it tells that the "framework.js" must load first before executing other scripts.

Load JS after JQuery is loaded

3 Answers3