如何识别已加载 JavaScript 文件答案

【问题标题】：How can I recognize that a JavaScript File is loaded如何识别已加载 JavaScript 文件
【发布时间】：2014-06-15 01:36:21
【问题描述】：

我有以下问题：

我的网站在 head 部分加载 jQuery。它具有“异步”标志，因此它是异步加载的。我已经使用 jQuery 编写了一些函数并没有处理内容。

当我在 jQuery 文件的末尾实现这个功能时，有时 jQuery 会在网站的整个 DOM 之前加载。这意味着我的函数找不到特殊元素并且不做任何事情。如果我在 HTML 文件的末尾实现这个功能，当 DOM 已经加载时，网页已经完成但 jQuery 没有。然后我得到了没有定义jQuery引用的错误。

有谁知道我该如何解决这个困境？ DOM和JS文件加载完毕后，异步加载JS并调用函数？

谢谢，延斯

【问题讨论】：

不要异步加载jQuery？
让你的其他script标签也异步？ “当我在 jQuery 文件的末尾实现这个函数时，有时 jQuery 会在网站的整个 DOM 之前加载。” 我什至不会问你为什么将代码添加到 jQuery文件。但是，我希望您了解 ready 处理程序，它会在 DOM 加载后立即执行代码：learn.jquery.com/using-jquery-core/document-ready
不都是关于 jQuery $(document).ready() 的吗？
@fallenPhantasm - 这不是.ready 的用途，因为如果没有加载 jQuery，$ 甚至将无法使用。
如果您打算异步加载，请使用“AMD”加载程序之一； Require.js 非常流行，但还有其他的——总之，这个“问题”已经解决了。 stackoverflow.com/questions/12117935/… , stackoverflow.com/questions/22951407/…

标签： javascript jquery html dom

【解决方案1】：

这并不难，也不需要像其他答案建议的那样需要额外的库或轮询。

脚本标签，包括标记为async 的标签，支持在加载时调用onload() 函数，并且jQuery 在加载DOM 时具有$(document).ready() 方法。你需要等待两者。所以：

<script async src='jquery.js' onload='jqueryloaded()'></script>
<script>
    function jqueryloaded() {
        $(document).ready(function () {
            // all your code
        });
    }
</script>

jsfiddle example

【讨论】：

非常感谢您提供这个很棒的提示！我按照你说的方式实现了它，但是我得到了错误，'jqueryloaded' not defined 是。加载 jQuery 是否可能比加载整个 HTML 文件更快，而不是尝试调用此函数？或者你有什么其他建议？
嗯......如果 jquery 已经被缓存，它可能是可能的，尽管我仍然希望它在运行之前解析页面。 async 功能在浏览器中不一致。但是为了得到那个错误，我会仔细检查你的代码是否有错别字。
我以这种方式添加了函数：'function jqueryloaded() { my code }'。这是实现 jQuery 的代码：''。我已经看到 safari 操纵异步并查看我得到 'async=""' 的 html 源代码。
我使用 bhamlin 的解决方案解决了这个问题。但我改变了订单。首先声明函数，然后我使用 onload 事件。这很好用，我没有任何问题。谢谢M

【解决方案2】：

使用require.js。

或者你可以写这样的东西，这不是最佳实践：

var checkforjquery = setInterval(function() {
  if (window.jQuery) {
    clearInterval(checkforjquery);
    // all your jquery functions
  }
}, 100);

【讨论】：

呃。当 jQuery 尚未加载时，您不能使用 $(window).load() 或 $(document).ready()。
这就是我添加区间函数的原因
你的回答是你可以做第一件事或第二件事。如果您打算有所不同，请编辑您的问题以澄清。

【解决方案3】：

您可以使用depend.js 库。在 head 元素中包含（同步）depend.js 文件，将 jquery 代码包装在

Library(
 "jquery",
 function(){
  //The jQuery itself goes here
});

并用这个包装每个需要 jQuery 的脚本：

Script(
 "any-name",
 ["jquery"],
 function(){
  //The script body
});

您甚至可以将它用于您的库。如果一个库依赖于另一个库，只需使用Library("mylib",["dependency1","dependency2"],f);，其中f 是库主体。

希望对你有帮助。

【讨论】：

【解决方案4】：

将所有 javascript 放在页面末尾，首先是 jQuery。像这样的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- jQuery -->
<script src="script.js"></script> <!-- your code -->
</body>
</html>

【讨论】：

你应该把它放在身体里，仍然:)
我认为OP的问题是如何解决异步加载jQuery时的问题，而不是如何使jQuery不异步加载。
这仍然是有效的 HTML 吗？我真的不这么认为。
干杯亚历克斯，你说得对。我在上面修好了。