Question

目前，我有一个通过<script>标记引用的jqueryUI.js文件我有几个$（document）.ready（）函数，它们使用jquery ui函数。

我正在尝试使用$ .getScript

动态加载jqueryUI.js文件

我尝试了以下代码......

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

位于页面顶部。我的想法是让$（document）.ready（）等到文件被下载，但逻辑进入WaitLoop并无限期地停留在那里。除非执行所有$（document）.ready（），否则不会下载该文件。

有没有办法在执行第一个$（document）.ready（）之前下载jqueryUI.js文件？

提前致谢。

Answer 1

您可以使用jQuery.holdReady()。这允许您延迟jQuery的ready事件，直到脚本加载完毕。

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

Answer 2

您可以将此代码用于此目标：

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

Answer 3

我广泛使用$.getScript()来依赖首先下载jQuery的脚本，因为$.getScript()在jQuery加载之前不会实例化（这是jQuery本身的一种方法，所以不能运行，除非qQuery已成功加载，解析jQuery依赖项）。

几个旁注：

$.getScript()强行下载，从不使用缓存副本。如果你总是想要新的下载，手杖是有用的。如果要启用缓存，可以使用$.ajax()方法。这样可以在后续页面上下载jQuery-ui等大文件时提高 SIGNIFICANT 性能。我将在这个答案的最后提供一个例子。
由于使用jqxhr模型的$.getScript()方法，您可以检查脚本加载失败，并抛出异常。 $.getScript()函数附加了.fail()处理程序，您可以像这样使用它...

使用$ .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)
    });

使用$ .ajax（） （用于缓存目的）

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

我个人在屏幕上写错误代码，所以我可以看到停止点比在控制台中更容易，并且我发现console.log输出有时会因我的调试软件而失败。有助于排除故障。使用此实现，您可以创建一个简单的依赖项加载器。定义一个脚本数组，执行一个函数来触发$.ajax()函数，并在它们全部完成时执行某些操作。瞧，依赖性已经解决了。 ReuireJAS这样做，但它是一组脚本和额外的lod时间。你已经加载了jQuery，所以为什么不这样做呢！

依赖解析的示例 如果您使用它，请保留积分... ：）

/*-----------------------------------
* 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');

然后在主.html或.php页面上包含这两行

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

AND VOILA !!! 我发现的最容易使用的依赖加载器：）

我使用此方法的原因是我的脚本之间的依赖性解析。每个依赖集都被定义为一个数组，我遍历它，它们按顺序加载，我很高兴：）

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

3 个答案: