在 jQuery 文档准备好之前，在 Window 上执行 DOMContentLoaded 事件

Question

假设我的页面某处有以下两个脚本标记：

<script>
    window.addEventListener("DOMContentLoaded",
        function()
        {
            console.log("DOM loaded");
        }
    );
</script>
...
<script>
    $(document).ready(
        function()
        {
            console.log("Document ready");
        }
    );
</script>

是否有任何简单的方法来强制在 $().ready 之前触发 DOMContentLoaded 事件？

这是我的实际问题的简化示例。我面临的真正问题是 DOMContentLoaded 事件已在我包含在页面正文底部的第三方库中注册，而且我有太多 $().ready 调用无法快速更改它们。理论上，我可以将 window.addEventListener 更改为 document.addEventListener 而不会产生任何问题，但是因为我在页面头部包含了 jQuery，所有 $().ready 调用仍然会在 document.addEventListener("DOMContentLoaded"...)，正如here所解释的那样，我无法合理地移动jQuery或这个第三方库的包含位置。如果可能，我还想避免更改第三方库。

Answer 1

您可以使用$.holdReady()

<script>
    $.holdReady(true);
    window.addEventListener("DOMContentLoaded", function() {
      console.log("DOM loaded");
      $.holdReady(false);
    });
</script>
...
<script>
    $(document).ready(function() {
      console.log("Document ready");
    });
</script>

在 jQuery 文档准备好之前，在 Window 上执行 DOMContentLoaded 事件

Enforce DOMContentLoaded event on Window before jQuery Document ready

javascript

jquery

event-handling

document-ready

domcontentloaded