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。因此，您需要通过订阅加载事件来等待它加载：

<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

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

简而言之，当一些其他脚本依赖它时，你不能异步加载jQuery或其他库，而不需要根据库执行脚本的其他异步处理。

Answer 3

这是我的解决方案：

    <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 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触发之间出现明显的暂停 - 用户赢了＆＃39;能够点击任何内容，视觉组件不会出现，等等。

Answer 5

这种方式很好用：

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

Answer 6

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

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

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

6 个答案: