jquery加载异步和就绪功能不起作用

Question

为了优化我的文档的负载,我使用像这样加载jquery异步

<script async type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

然后我使用jquery调用脚本:

<script type="text/javascript">
    jQuery(document).ready(function() {
    App.init();
    OwlCarousel.initOwlCarousel();
    FancyBox.initFancybox();
    StyleSwitcher.initStyleSwitcher();

    });
</script>

它返回我没有定义jquery.

我不知道我应该使用什么,我虽然.readyfunction会等到所有文件都被加载后再调用它.

对于boostrap库来说,它告诉我没有定义jquery.

我试过要求脚本最后加载,但它仍然无法正常工作.

任何帮助将不胜感激.

Answer 1

由于jquery脚本是异步jquery加载的,因此在脚本执行时不会加载.因此,您需要通过订阅load事件来等待它加载,如下所示:

<script async id="jquery" type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
Then I call a script using jquery :

<script type="text/javascript">
  document.getElementById('jquery').addEventListener('load', function () {
    App.init();
    OwlCarousel.initOwlCarousel();
    FancyBox.initFancybox();
    StyleSwitcher.initStyleSwitcher();
  });
</script>

但我不知道为什么有人想做这样的事情.

为了优化页面加载速度,最好将所有javascript放在正文的末尾,这样首先加载内容,如果同步加载脚本,脚本不会延迟页面呈现事件.

Answer 2

Question Script Tag - async & defer可以很好地解决您的问题。

简而言之，当其他脚本依赖它时，您无法异步加载 jQuery 或其他库，而没有一些额外的异步处理来执行依赖库的脚本。