为什么不加载 jQuery？答案

【问题标题】：why isn't jQuery loading?为什么不加载 jQuery？
【发布时间】：2010-07-07 21:44:44
【问题描述】：

当使用 importjs() 类型的函数时（参见下面的示例），jQuery 似乎不会在其后面的代码之前加载。

这是一个示例 html 文件：

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function importjs(jsFile) {
        var body = document.getElementsByTagName('head').item(0);
        var scpt = document.createElement('script');
        scpt.src = jsFile;
        scpt.type = 'text/javascript';
        body.appendChild(scpt);
      }
      var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
      //importjs(f1);
      var $j=jQuery;
      alert("hello stackoverflow!");
    </script>
  </body>
</html>

使用上面的代码，警报应该会成功触发。

接下来，注释掉第一个脚本块，即显式加载 jQuery 的那个，并取消注释第二个脚本块中的 importjs(f1) 行。这一次，警报不会触发，至少在 firefox 和 safari 中是这样。

现在，在“var $j=jQuery”行之前添加一个额外的警告。对我来说，无论我等待多长时间，它都适用于两种浏览器。 setTimeout 可能也可以解决问题，但它也不是编写此类程序的理想方法。

如果javascript是单线程的，为什么importjs会失败？是因为 importjs 创建的新元素在第一个块完成之前不会“执行”，还是应该在创建新元素后立即执行？

【问题讨论】：

标签： javascript jquery lazy-loading dynamic-script-loading

【解决方案1】：

这里有几个问题：

你有 jQuery 复制，一个在 html 中，一个在 js 中

动态添加的 javascript 不会立即可用如果您以这种方式加载脚本，则依赖代码应该在回调函数中

function importjs(jsFile, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = jsFile;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
      // execute callback
      if (callback) callback();
      // prevent memory leak in IE
      script.onload = null;
      head.removeChild(script);
    };
    head.appendChild(script);
}

那么你应该把它用作：

importjs("jquery.js", function(){
    // all jQuery dependant code
    // goes here...
});

更新

有一个更强大的包含 javascript 文件的解决方案，它允许您：

包括多个相关的文件
确保它们按顺序执行
以非阻塞方式加载它们（与其他资源并行）

我还在工作 on this script，但现在几乎可以工作了。请务必检查一下。

它结合了不同技术的优点，在页面加载时间方面提供了巨大的好处。这是一篇相关文章：Loading Scripts Without Blocking

语法是：

include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order

【讨论】：

不确定我是否明白您的第一点 - 我认为如果您取消对 importjs 的注释，则只会出现重复。但是您的主要贡献（将“script.onload”更改为“scpt.onload”）起到了作用。谢谢！！！！！！
是的，我说的是那个重复。如果您删除您的 html script 标签，您就可以开始了。
更新：它适用于我尝试过的所有浏览器，除了 IE（到目前为止我只在 IE8 上测试过）。还有什么建议吗？
好吧，我忘记了 IE 特定的部分。更新了答案。现在可以了。
你摇滚！奇迹般有效！还有两个问题：1）您是否授予我在我的代码中使用此脚本的许可？ 2）有没有更简单的方法来做这个问题的更简单版本：我想创建一个可包含在任何网页上的小部件。到目前为止，我需要的唯一代码在两个库中：我的和 jQuery，但我需要确保在我的代码运行之前加载 jQuery。您的代码将为此工作，但似乎有点过分好/强大。另外，我无法控制页面其余部分的 jQuery 版本，所以我想避免版本冲突。想法？