Question

可能重复：


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...
  }

Answer 1

动态加载脚本的普遍接受的方法是创建脚本元素然后附加到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
});

Answer 2

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

通常在包含JQuery之前，所有依赖库和库只有在收到$（document）.ready事件后才使用JQuery中的DOM API。

Answer 3

那里的装载机很少。您可以轻松使用它们。恩。 -

http://headjs.com/
http://labjs.com/
http://www.dustindiaz.com/scriptjs

检查一下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”必须首先加载才能执行其他脚本。

加载JQuery后加载JS

3 个答案: