为何window加载早于DOM？附Eclipse中jQuery示例代码

先来看你提供的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
window.onload = function (){
 alert("Window loaded");
}
$(document).ready(function(){
 alert("DOM loaded");
})
</script>
</head>
<body>
<p>He...

你提到运行这段代码时发现window.onload的触发早于$(document).ready()，这看起来有点反常识，我来给你拆解背后的原因：

先明确两个事件的核心区别 #

• window.onload：这是浏览器原生的Window事件，它的触发条件是整个页面的所有资源都完全加载完毕——包括HTML文档本身、所有图片、样式表、外部脚本、甚至嵌入的多媒体资源（音频/视频）都加载完成后，才会执行绑定的函数。它不需要依赖任何外部库，浏览器会自动监听这个事件。
• $(document).ready()：这是jQuery封装的兼容写法，本质对应浏览器的DOMContentLoaded事件，触发条件是HTML文档被完全解析，DOM树构建完成，不需要等待图片、样式表这些外部资源加载。但要注意：这段代码能正常执行的前提是，jQuery库已经加载并可用。

你遇到“window加载更早”的原因 #

正常情况下，$(document).ready()应该比window.onload更早触发，但你遇到的相反情况，大概率是因为jQuery文件加载不及时：
你的代码里，$(document).ready()的注册代码写在jQuery引入脚本的后面，但如果js/jquery-3.3.1.min.js路径不正确、文件损坏，或者加载速度过慢（比如本地开发时文件读取延迟），浏览器会先解析并执行window.onload的绑定代码，而$(document).ready()的代码要等jQuery加载完成后才会执行——这时候可能window.onload已经触发，导致你先看到"Window loaded"的弹窗。

验证和解决建议 #

1. 先检查jQuery文件路径：确保js/jquery-3.3.1.min.js确实存在于项目对应目录，文件名和路径没有拼写错误。
2. 尝试把脚本放到<body>末尾：浏览器会先解析完DOM再加载脚本，能减少DOM就绪和脚本加载的时间差：

<body>
<p>He...
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
window.onload = function (){
 alert("Window loaded");
}
$(document).ready(function(){
 alert("DOM loaded");
})
</script>
</body>

3. 用原生事件替代测试：排除jQuery的问题，直接用原生DOMContentLoaded事件验证：

document.addEventListener('DOMContentLoaded', function() {
  alert("DOM loaded");
});

内容的提问来源于stack exchange，提问作者kumarras