Question

在我的网站上，我正在异步加载jQuery。

为了做到这一点，我必须在真正加载之后才运行jQuery函数。

我尝试过两种纯粹的JS方法：

<script src="js/jquery-2.2.2.min.js" async></script>
<script>
    window.addEventListener('load', function() {
        //stuff
    }, true);
</script>

和

window.onload = function() {
    //stuff
}

但即便如此，我仍然得到Uncaught TypeError: $(...) is not a function at...

如何在lib完全加载后触发jQuery函数？

Answer 1

只有在使用脚本标记加载jQuery库之后才需要添加脚本。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  // your code should be here
  alert(typeof jQuery)
</script>

＆＃13;

document ready handler仅用于在加载DOM元素后执行代码。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  console.log('Outside document ready handler ' + $('.test').length)

  $(document).ready(function() {
    console.log('Inside document ready handler ' + $('.test').length)
  });
</script>
<div class="test"></div>

＆＃13;

更新1：如果脚本位于文件中，您可以使用defer，请参阅以下问题：jquery loaded async and ready function not working

更新2：或者您可以使用load方法将addEventListener事件处理程序绑定到脚本代码。

＆＃13;

<script async id="script" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  document.getElementById('script')
    .addEventListener('load', function() {
      alert(typeof jQuery)
    });
</script>

＆＃13;

仅供参考：我不知道你为什么要这样做，为了优化内容加载的速度，最好在{{{}结束时移动脚本标签1}}这有助于首先加载内容。

Answer 2

你可以这样做：

function checkVariable(){
   if ( window.jQuery){
      Do your jquery stuff here
   }
   else{
      window.setTimeout("checkVariable();",100);
   }
}
checkVariable();

格式化的道歉......现在卡在我的手机上。

Answer 3

我没有列出此方法，所以我想我会示范使用JavaScript HTML DOM EventListener。

示例1，使用jQuery.ready()方法：

<p id="test-jquery">jQuery Not Loaded</p>

<script>
  $(document).ready(function() {
    var elem = $('#test-jquery');
    elem.text('jQuery Is Loaded');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于尚未加载jQuery，因此该方法无效。运行上面的示例将输出：

ERROR: {
  "message": "ReferenceError: $ is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 13,
  "colno": 3
}

示例2，使用addEventListener()方法：

<p id="test-jquery">jQuery Not Loaded</p>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var elem = $('#test-jquery');
    elem.text('jQuery Is Loaded');
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

此方法将起作用，因为我们正在监听Window DOMContentLoaded event。

来自Mozilla：

此事件的原始目标是已加载的Document。您可以在Window界面上监听此事件以处理它捕获或冒泡阶段。有关此活动的完整详细信息，请请参阅“文档：DOMContentLoaded”事件上的页面。

另一个事件load仅应用于检测已满载页。在DOMContentLoaded会使用的地方使用负载是一个常见的错误更合适。

Answer 4

使用document.ready或在标题中加载库。这应该工作..一定要加载到正确的文件夹或右侧链接。如果您正在使用加载jquery的链接，那么一定要有互联网连接

如何在加载jQuery后运行jQuery函数？

4 个答案: