在$（document）.ready（）之前jquery动态加载外部脚本文件

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

Answer 2

I use $.getScript() extensively for scripts that rely on jQuery being downloaded first as $.getScript() won't instantiate until jQuery is loaded (it's a method of jQuery itself, so can't run unless qQuery has loaded successfully, resolving a jQuery dependency).

A couple of side notes:

• $.getScript() forces a download, it NEVER uses cached copies. cane be useful if you always want fresh downloads. You can use the $.ajax() method if you want to enable caching. This allows a SIGNIFICANT performance boost when downloading large files like jQuery-ui on subsequent pages. I will provide an example at the end of this answer.

• Due to the $.getScript() method using the jqxhr model, you can check for a failed script load, and the exception being thrown. The $.getScript() function has a .fail() handler attached, you can use it like this...

using $.getScript()

var urlToLoad = "testLoader.js";

$.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){
    //  Execute script on successful load
 }).fail(function(jqxhr, settings, exception) {  
        //  Code to execute if script fails to load any further
        document.write('FAILED Script Load '+urlToLoad +': '+exception)
    });

using $.ajax() (for caching purposes)

var urlToLoad = "testLoader.js";

$.ajax({
   dataType: "script",
   url: "someurl.php",
   cache: true,
   success: function() {
       //  code to execute on script load success
   }
}).fail(function(jqxhr, settings, exception) {  
        //  Code to execute if script fails to load any further
        document.write('FAILED Script Load '+urlToLoad +': '+exception)
    });

I personally write error codes to the screen so I can see the stop point a little easier than in a console, and I have found that console.log output sometimes fails for me depending on my debug software. Helps a LOT for troubleshooting. Using this implementation, you can make a simple dependency loader. Define an array of scripts, execute a function to fire the $.ajax() function, and do something when they're all done. And voila, dependency resolved. ReuireJAS does this, but it's a set of scripts and additional lod times. You have jQuery already loaded, so why not do that!

Example of dependency resolution please keep credits if you use it... :)

/*-----------------------------------
* Script is free to use as long as 
* credits stay attached to script here.

* jQuery Dependency Loader
* created: May 15, 2012  
* author: Darren Maurer
* CEO/CIO/President
* Monarch Research International
* http://MonarchResearch.ca

using jQuery-1.7.2.min.js.php (caching enabled)
------------------------------------*/

//  Array of fileName to include in loader      
var urlsToLoadInOrder = ["js/file1.js","js/file2.js","js/file3.js"];

function ProcessDependency(urlArrayPointer) {

        if (urlArrayPointer >= urlsToLoadInOrder.length) {
            return;
        }

    var attemptedFile = urlsToLoadInOrder[urlArrayPointer];

    $.ajax({
       dataType: "script",
       url: attemptedFile,
       //Enable caching for performance, disable with 'cache: false'
       cache: true, 
       success: function() {
           //  code to execute on script load success
           urlArrayPointer++;
           ProcessDependency(urlArrayPointer);
       }
    }).fail(function(jqxhr, settings, exception) {  
            //  Code to execute if script fails to load any further
            alert('FAILED Script Load '+attemptedFile +': '+exception);
            return false;
        });
}

//  Set pointer to zero and instantiate the loader
ProcessDependency(0);

//  All scripts successfully loaded in order, dependencies resolved
alert('loads complete');

Then just include these two lines on your main .html or .php page

<script type="text/javascript" src="js/jquery-1.7.2.min.js.php"></script>
<script src="ajaxDependencyLoader.js"> </script>

AND VOILA!!! The easiest to use dependency loader I've found yet :)

The reason I use this method, is for dependency resolution between my scripts. Each dependency set is defined as an array, and I loop through it, they load in order, and I'm happy :)

Answer 3

You can use this code for this target:

var wf = document.createElement('script');
        wf.src = 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);