运行 inline jQuery after jQuery-library 在文档底部完全加载？

Question

我有一个很大的内联 jQuery 函数，我想在底部加载 jQuery 库后触发它。否则我会得到“Uncaught 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-library 并且可能不将 jQuery-library 移动到头部之后，是否有任何方法可以触发我的内联函数？非常感谢您！

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

运行 inline jQuery after jQuery-library 在文档底部完全加载？

Run inline jQuery after jQuery-library is fully loaded at the bottom of the document?

jquery

function

jquery-3