加载 JQuery 后加载 JS [重复]答案

【问题标题】：Load JS after JQuery is loaded [duplicate]加载 JQuery 后加载 JS [重复]
【发布时间】：2012-11-29 01:07:02
【问题描述】：

可能重复：

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

我以这种方式包含了 jQuery：

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

现在应该以相同的方式加载下一个脚本。但是如果在最后一行之后加载，我就不能使用 jQuery，因为它可能没有完成加载。那么如何检查 jQuery 的加载是否完成？我可以这样做吗？：

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

【问题讨论】：

how to check the script element load event accross browser without jquery 或 dynamic script loading synchronization 的可能副本
不，你不能这样做。在 JavaScript 中无法进行忙等待，因为它不会终止并冻结浏览器。此外，您永远无法确定脚本声明了一个名为“jQuery”的变量。
查看这个相关答案：Load ordering of dynamically added script tags
我将以下代码放在我的应用程序之上：

标签： javascript jquery function

【解决方案1】：

那里很少有加载器。您可以轻松使用它们。前任。 -

检查这个http://labjs.com/documentation.php。这个的编码方法看起来和你的相似。你可以写 -

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

看到 wait() 了吗？它告诉“framework.js”必须先加载，然后再执行其他脚本。

【讨论】：

【解决方案2】：

通常接受的动态加载脚本的方法是创建脚本元素，然后附加到 DOM（如您所做的那样），但也分配一个回调函数来检测脚本何时加载。

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

用法：

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

【讨论】：

您的建议对我有用。这样我就不必说“等到它加载完毕”。
这是一个很棒的小sn-p代码...尤其是当您通过Adobe Target注入时。我遇到了一个问题，即 Slick Carousel 在 jQuery 之前加载。像这样的伟大用例。

【解决方案3】：

JS 是单线程的应用程序使用：如果你创建一个无限循环，整个页面就会卡住。

通常在所有依赖库之前包含 JQuery，并且库仅在收到 $(document).ready 事件后才使用来自 JQuery 的 DOM API。

【讨论】：