jQuery 加载异步和就绪函数不工作

Question

为了优化我的文档的加载，我使用像那样加载 jQuery async

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

我试图让脚本在最后加载，但它仍然无法正常工作。

原文由 Stanislas Piotrowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 放在 body 的末尾，这样内容将首先加载，如果同步加载，脚本不会延迟页面渲染事件。

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

原文由 Andrey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

问题 脚本标签 - async & defer 可以很好地解决您的问题。

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

原文由 ighea 发布，翻译遵循 CC BY-SA 3.0 许可协议