Question

我有一个$（document）.ready函数（显示移动菜单），它必须等待jQuery导入。我注意到有时它会出现，有时它不依赖于jQuery首先加载。 jQuery导入异步加载。我想延迟$（document）.ready函数，直到确定jQuery已经加载为止。我尝试使用延迟和异步但它似乎不起作用。我也尝试添加setTimeout（）但它也不起作用。

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript' />

 <script defer='defer' async='async' type='text/javascript'>
 ;(function ($, document, window) {   var
    // default settings object.
    defaults = {
      label: 'MENU',
      duplicate: true,
      duration: 200,
      easingOpen: 'swing',
      easingClose: 'swing',
      closedSymbol: '&#9658;',
      openedSymbol: '&#9660;',
      prependTo: 'body',
      parentTag: 'a',
      closeOnClick: false,
      allowParentLinks: false,
      nestedParentLinks: true,
      showChildren: false,
      init: function(){},
      open: function(){},
      close: function(){}
    },... </script>

Answer 1

问题是您将jQuery加载为异步：

<script async='async'  <----------- this is the problem
    src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'
    type='text/javascript'
/>

async属性告诉您的浏览器在页面上执行所有其他javascript代码之后可以加载此文件。解决方案是删除async。

但是不推荐异步？

是，但仅适用于页面上其他脚本不依赖的脚本。对于像jQuery这样的库，你需要确定它已被加载，你不应该使用async。

但如果浏览器等待jQuery，它会不会减慢页面加载速度？

是的，解决方法是在<head>标记关闭之前将所有脚本标记移到页面底部<body>之外：

<html>
<head></head>
<body>
   some stuff...



 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript' />
 <script type='text/javascript'>
 ;(function ($, document, window) {   var
    // default settings object.
    defaults = {
      label: 'MENU',
      duplicate: true,
      duration: 200,
      easingOpen: 'swing',
      easingClose: 'swing',
      closedSymbol: '&#9658;',
      openedSymbol: '&#9660;',
      prependTo: 'body',
      parentTag: 'a',
      closeOnClick: false,
      allowParentLinks: false,
      nestedParentLinks: true,
      showChildren: false,
      init: function(){},
      open: function(){},
      close: function(){}
    },... </script>
</body>
</html>

但我（或我的老板）不喜欢头外的剧本!!

嗯，你仍然可以将你的脚本放在头脑中，但它有点牵扯。基本上你需要监听jquery脚本标记的onload事件。但这意味着您需要动态创建标记，而不是在html中对其进行硬编码：

<html>
<head>
  <script>
    var jq = document.createElement('script');
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js";

    jq.async = true;  // you can still load as async!

    jq.onload =  function () {
      (function ($, document, window) {   var
      // default settings object.
      defaults = {
        label: 'MENU',
        duplicate: true,
        duration: 200,
        easingOpen: 'swing',
        easingClose: 'swing',
        closedSymbol: '&#9658;',
        openedSymbol: '&#9660;',
        prependTo: 'body',
        parentTag: 'a',
        closeOnClick: false,
        allowParentLinks: false,
        nestedParentLinks: true,
        showChildren: false,
        init: function(){},
        open: function(){},
        close: function(){}
      },... 
    };
    document.head.appendChild(jq);
  </script>
</head>
<body> .... </body>
</html>

Answer 2

将您的$(document).ready功能作为页面上的最后一个脚本。

您可能需要考虑将加载JQuery的脚本放在文档的<head>中，以确保它在调用之前加载。

如何在延迟加载脚本的同时使JS异步？

2 个答案:

但是不推荐异步？

但如果浏览器等待jQuery，它会不会减慢页面加载速度？

但我（或我的老板）不喜欢头外的剧本!!