在其他脚本之前异步加载jquery

Question

我已将asyncattrib 添加到我的javascript包含HTML中.
所以我现在:

<script async src="jquery.myscript.js"></script>

这适用于所有JS我加载,除了jquery之外.

如果我添加async到jQuery <script>标记所有其他依赖于jquery的脚本都不起作用.

在那个jsfiddle你可以看到问题:
JsFiddle

在我使用的示例中,我使用的<script> Mycode </script>不是包含外部file.js,但这并没有改变这种情况.

我想用异步attrib运行jQuery并在加载jquery之后异步运行其他几个外部脚本.

有可能的？

Answer 1

我想用异步attrib运行jQuery并在加载jquery之后异步运行其他几个外部脚本.

那是什么意思？这听起来很像你想先加载jQuery,然后是其他的东西.所以你想同步加载它.如果您仍想使用这种async方式,您可以定义一个onload函数,以便在jQuery准备就绪后继续加载其他内容.或者你可以使用defer.这两个都在这里解释:https://davidwalsh.name/html5-async

Answer 2

这是一个很好的用例defer:

<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>

这些标签都不会阻止渲染.该浏览器可以下载jquery.js和custom.js并行.它将jquery.js在下载并且已加载DOM custom.js后立即执行,并在之后执行.

可悲的是,有一些问题:

• 您不能将该defer属性用于内联脚本.
• IE <10已被记录,以使与脚本defer到意外交织它们的执行.
• 我找不到任何说明带有defer顺序的脚本按顺序执行的规范,只是说它们是在DOM加载后执行的.

Answer 3

这可能是你正在寻找的:
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl一个异步的jQuery Loader.

它异步加载jQuery而不阻塞其他组件:

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');

jQl自动捕获所有jQuery().ready()调用,因此您可以编写:

<script type="text/javascript">
  jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
  jQuery('document').ready(function(){
    alert('Hello world');
  });
</script>

jQl将对这些函数调用进行排队,并在加载jQuery并且DOM准备好后立即执行它们,因为它们将以通常的方式执行.