Question

我有以下问题：

我的网站正在加载头部的jQuery。它有＆＃34; async＆＃34;标志，以便它异步加载。我已经使用jQuery和操作内容编写了一些函数。

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

有谁知道如何解决这个难题？在加载DOM和JS文件时，异步加载JS并调用函数？

谢谢，延

Answer 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

Answer 2

使用require.js。

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

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

Answer 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是库体。

希望它有所帮助。

Answer 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>

如何识别加载了JavaScript文件

4 个答案: