在 Google Chrome 上，Window 比 DOM 更先加载 jQuery答案

【问题标题】：Window is loading first than DOM with jQuery on Google Chrome在 Google Chrome 上，Window 比 DOM 更先加载 jQuery
【发布时间】：2018-06-14 15:00:07
【问题描述】：

我是 jQuery 新手。我知道 DOM 内容将首先加载，然后 window.onload 事件将发生，因为必须加载所有样式表和图像。但是下面的代码对我来说并不是这样

 <!DOCTYPE html>
<html>
    <head>
        <title>Add Event Listener</title>
        <script type="text/javascript" src="../jquery-3.2.1.js"></script>
        <script type="text/javascript" >
            $(document).ready(function(){
                alert("DOM Loaded");
            });
            $(window).on("load",function(){
                alert("Window Loaded");
            });</script>
    </head>
    <body>

    </body>
</html>

在 Google Chrome (63.0.3239.108) 上打开它后，我收到一个警告，在“DOM 已加载”警报之前，窗口已加载。 与 Microsoft Edge (40.15063.0.0) 相同的问题

但是，这适用于 Firefox(57.0.3)

谁能解释一下？

提前致谢！这个问题不是重复的

window.onload seems to trigger before the DOM is loaded (JavaScript)

【问题讨论】：

标签： javascript jquery html google-chrome dom

【解决方案1】：

那是因为您在没有任何要加载的图像的情况下对其进行测试...

所以所有的标记都已经被解析并加载了。所以load 事件发生了。然后当脚本被解析后，就会出现ready。

当有图像要加载时，通常是解析速度更快的脚本。

看看下面有一个时会发生什么。

$(document).ready(function(){
  alert("DOM Loaded");
});
$(window).on("load",function(){
  alert("Window Loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">

【讨论】：

【解决方案2】：

它们是事件，由正在实现的状态触发。它们不是相互依赖的事件，因此它们没有固定的顺序。

window.onload 在 html 文档中声明的所有资源都下载后触发。

document.onload 在 dom 构建后触发。

它们不相互依赖。可以在下载最后一个资源之前构建 dom。所有资源都可以在 dom 构建之前下载。

【讨论】：

这也是一个很好的答案。请注意，这意味着这些事件的顺序实际上是未定义的。在 chrome 中，它可能会第一次加载窗口并记录另一个。