jQuery加载的async和ready函数不工作

jQuery loaded async and ready function not working

本文关键字：函数 工作 ready 加载 async jQuery      更新时间：2023-09-26

为了优化文档的加载，我使用类似的异步加载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没有定义。

我试着要求在最后加载脚本，但它仍然不能正常工作。

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

问题脚本标记-async&defer对你的问题有很好的答案。

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

这就是我的解决方案：

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

jQuery和所有依赖jQuery的组件（包括Bootstrap）都依赖于挂接DOMContentLoaded事件来设置事件。

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

反过来，这意味着<script async ...将是不可靠的，每当jQuery下载时间比页面内容长时就会崩溃。

不幸的是，由于jQuery试图在document.readyState === "interactive"之后立即启动，<script defer ...也无法工作。

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

这种方式很好用：

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

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

相关文章：