在文档底部完全加载 jQuery-library 后运行内联 jQuery？答案

【问题标题】：Run inline jQuery after jQuery-library is fully loaded at the bottom of the document?在文档底部完全加载 jQuery-library 后运行内联 jQuery？
【发布时间】：2021-02-02 16:18:29
【问题描述】：

我有一个大的内联 jQuery 函数，我想在底部加载 jQuery 库后触发它。否则我会得到“未捕获的 ReferenceError”。因此，我将该函数包装成一个超时函数——它可以工作，但前提是 DOM 的加载速度快于超时所需的时间。我已经尝试过 window-on-load-function，它也返回了“Uncaught ReferenceError”。

HTML 文档如下所示：

<html>
<head>
...
</head>
<body>
...
<script>

    // Inline jQuery that needs to stay inline

    setTimeout( function(){ 

        // Run my big jQuery function

    }, 100 );

</script>
...
<script src="jQuery-library.js" ><script>
<script src="my-jQuery-functions.js" ><script>
</body>

有没有办法在文档底部的 jQuery 库完全加载后触发我的内联函数，并且可能不将 jQuery 库移动到头部？非常感谢您！

【问题讨论】：

为什么不能直接把脚本移到jQuery下面？

标签： jquery function jquery-3

【解决方案1】：

您可以对 load 事件做出反应，该事件在所有资源（脚本、图像等）完成加载后发生：

<script>
window.addEventListener("load", function () {
  $(function () {
      $("body").append("<p>jQuery is available now!</p>");
      
      // Run my big jQuery function
  });
}, false);
</script>

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

【讨论】：

哇——非常感谢！这让我省了很多麻烦，同时又超级简单！太好了，再次感谢！