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>

returns 我认为 jquery 未定义。

我不知道我应该使用什么，虽然 .readyfunction 会等到所有文档都加载完毕后再调用它。

boostrap 库也一样，它告诉我 jquery 未定义。

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

如有任何帮助，我们将不胜感激。

Answer 1

问题 Script Tag - async & defer 对您的问题有很好的回答。

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

Answer 2

由于 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 加载到页面的最佳方式

Answer 3

您尝试访问时使用了异步加载Jquery它没有被浏览器加载您可以访问Jquery页面加载完成后。

正常加载 Jquery 以解决您的问题。

Answer 4

jQuery，以及所有依赖于jQuery的组件（包括Bootstrap），依赖于挂钩DOMContentLoaded事件来设置事件。

这意味着 jQuery（以及任何使用 $(function() {...}) 的东西）必须在 DOMContentLoaded 触发之前下载，否则它永远不会连接它的事件。

反过来，这意味着 <script async ... 将不可靠，只要 jQuery 的下载时间比页面内容的下载时间长，就会中断。

不幸的是 <script defer ... doesn't work either 感谢 jQuery 试图在 document.readyState === "interactive".

您可以加载内容，然后通过将 <script> 放在 <body> 的末尾来加载 jQuery，但这会导致页面出现和任何页面之间出现明显的停顿jQuery 触发 - 用户将无法点击任何内容，视觉组件不会出现，等等。

Answer 5

这是我的解决方案：

    <script async type="text/javascript" src="path_to_jquery" id="jquery_script_tag">
    </script>

    <script>
    if ( !('jQuery' in window) )
    {
        window.jQueryQueue = [];
        //define temporary jQuery function
        window.jQuery = function(){
            //just save function parameters to queue
            jQueryQueue.push( arguments );
        }
        document.getElementById('jquery_script_tag').addEventListener('load', function(){
            //call jQuery with parameters saved in queue, after it loaded
            for ( var i in jQueryQueue )
                jQuery.apply( document, jQueryQueue[i] );
        });
    }
    </script>

此代码定义了一个临时 jQuery 函数（如果尚未定义）。该函数将所有 jQuery 函数调用保存到队列中，而真正的 jQuery 尚未加载（而不是调用未定义的 jQuery 函数）。当 jQuery 加载后，它调用队列中的 jQuery 函数，参数与之前调用的相同。

Answer 6

这种方式很好用：

<script charset="utf-8" type="text/javascript">
var intervalID = window.setInterval(function(){
  if(window.jQuery){
    clearInterval(intervalID);
    console.log('Loaded');
    /* Your code here */
  }
},1000);
</script>

jquery 已加载的异步和就绪功能无法正常工作

jquery loaded async and ready function not working

javascript

jquery

load

async-await

document-ready