jQuery中Ready与OnLoad的区别及DOM加载时机详解
本文详解jQuery中ready与onload的执行时机差异，对比$(document).ready()、$(window).load()及body onload的优劣。通过代码示例说明多函数执行顺序、代码分离及DOM解析限制，帮助开发者根据需求选择正确的加载方式，提升页面响应速度。
jQuery中Ready与OnLoad的区别及DOM加载时机详解
页面加载完成涉及两种主要事件：一是ready，它表示文档的DOM结构已经加载完毕（不包含图片、样式表等非文字媒体资源）；二是onload，它指示页面中包含图片、Flash等在内的所有外部资源均已加载完毕。简而言之，ready事件的触发时机在onload之前。
对于涉及样式控制的场景，例如需要根据图片实际尺寸来调整布局，这类操作应当放置在onload事件中执行，以确保获取到准确的图片尺寸。
对于由用户交互触发的JavaScript事件绑定或初始化方法，通常建议在ready事件中加载，以确保DOM元素存在。
许多jQuery开发者在编写脚本时，常采用以下简洁的写法作为起点。
这是最常见的jQuery初始化写法。
具体代码实现如下：
$(function(){
// 在此处编写初始化逻辑
}); 上述写法实际上是jQuery中ready()方法的简写形式，其功能等价于以下完整写法。
等价代码示例：
$(document).ready(function(){
// 在此处编写初始化逻辑
}) 此外，它还可以简写为$().ready()形式，因为jQuery的默认参数即为“document”。
相关代码示例：
$().ready(function(){
// 在此处编写初始化逻辑
}) $(document).ready()、OnLoad与$(window).load()方法对比
接下来对比$(document).ready()方法、原生OnLoad事件以及$(window).load()方法的异同。
初学者接触jQuery时，最先解决的问题往往是脚本何时启动。在很长一段时间里，页面载入后的事件处理都被绑定在HTML Body标签的Onload事件中。
相比于原生的Body Onload事件，jQuery的Ready方法具有显著优势，主要体现在以下几个方面。
首先是处理多个加载函数的问题。
例如在HTML中：<body onload="a();b();">
</body>
在Onload事件中，若要执行多个函数，只能以这种拼接字符串的方式实现，代码可读性较差且难以维护。
而在jQuery中，可以多次调用jQuery.Ready()方法，它们会按照注册的次序依次执行，结构清晰。
其次是代码与内容的分离问题。
这一点无需多言，将行为逻辑与HTML结构分离是现代Web开发的基本准则，原生Onload写法往往导致两者耦合。
最后是执行先后顺序的不同。
Body.Onload事件必须等待页面所有内容（包括图片、Flash等媒体资源）加载完毕后才会触发。如果页面包含大量媒体文件，用户可能需要等待很长时间才能看到页面交互效果。
相比之下，$(document).ready()方法仅在页面所有DOM结构加载完毕后触发，无需等待媒体资源，从而显著加快了页面的可用速度。
然而，对于某些特殊应用场景，如图片放大、缩小或剪裁功能，必须等待所有图片资源加载完毕才能正确执行。此时推荐使用$(window).load()方法，它会在页面所有内容加载完毕后触发，且避免了Onload事件的缺点。
代码示例如下：
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>上述代码会在页面所有内容加载完成后，按照注册的先后顺序依次执行。
此外，不要忘记与之对应的页面卸载方法。
相关代码示例：
<script type="text/javascript">
$(window).unload(function() {
alert("good bye");
});
});上述代码会在页面关闭或卸载时触发执行。
在DOM加载前执行JS代码的注意事项
最后介绍一种在所有DOM加载之前引发JS代码的方法。
这种方法在调试阶段非常实用，有时在开发过程中也会用到。
具体代码实现如下：
<body>
<script type="text/javascript">
(function() {
alert("hi");
})(jQuery)
</script>
</body>这是利用JavaScript闭包形式将代码嵌入Body的方式，代码会自动执行。当然，也可以直接嵌入JS代码，但这种方式需要特别注意代码执行的顺序问题。
代码示例对比：
<body>
<div id="test">this is the content</div>
<script type="text/javascript">
alert($("#test").html());// 可以正常显示内容
</script>
</body>
<body>
<script type="text/javascript">
alert($("#test").html());// 无法显示内容
</script>
<div id="test">this is the content</div>
</body>对比上述两段代码，第二段代码中由于脚本执行时DOM解析器只能处理到当前代码之前的节点，而id为test的元素尚未被解析，因此该段代码无法正确获取内容。
JavaScript零基础入门：从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript：void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化：FormData与URLSearchParams用法详解
2026-11-03 23:13:21