jquery dynamic loading of external script files before $(document).ready()

Question

Currently, I have a jqueryUI.js file referenced through a <script> tag.
I have several $(document).ready() functions, which use jquery ui functions.

I am trying to load jqueryUI.js file dynamically using $.getScript

I tried the following code...

var scriptCntr = 0;
$(document.ready(function(){
    scriptCntr ++;
    $.getScript(path, function (data, textStatus) {
        scriptCntr --;
    });
    while(scriptCntr!=0){
    } 
});

on the top of the page. The idea is to make the $(document).ready() wait till the file is downloaded, but the logic goes to the WaitLoop and stays there indefinitely. The file wouldn't download unless all the $(document).ready() is executed.

Is there a way to download the jqueryUI.js file before the first $(document).ready() is executed?

Thanks in advance.

Answer 1

You can use jQuery.holdReady(). This allows you to delay the jQuery's ready event until after the script has loaded.

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});