Question

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

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

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

这是我实际问题的简化示例。我面临的真正问题是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 Document准备好之前，在Window上强制执行DOMContentLoaded事件

1 个答案: