javascript - 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 会等到所有文档加载完毕后再调用它。

Bootstrap 库也是如此，它告诉我 jQuery 没有定义。

我尝试要求脚本在最后加载，但仍然无法正常工作。

Answer 1

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

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

然后监听此元素上的 load 事件

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

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

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

编辑:我同意评论并认为前一段不是将 jQuery 加载到页面的最佳方式