在 Google Chrome 上，Window 比 DOM 更先加载 jQuery
Posted
技术标签:
【中文标题】在 Google Chrome 上，Window 比 DOM 更先加载 jQuery【英文标题】：Window is loading first than DOM with jQuery on Google Chrome 【发布时间】：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)
【问题讨论】：
【参考方案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 中，它可能会第一次加载窗口并记录另一个。以上是关于在 Google Chrome 上，Window 比 DOM 更先加载 jQuery的主要内容，如果未能解决你的问题，请参考以下文章
window.open 用于 Google 地图 - iPhone 上的灰屏 Google Chrome
“将图像另存为..”在使用 window.open() 和 document.write() 时无法在 Google Chrome 中运行