document.ready与window.onload执行时机差异解析

DOM加载与执行时机基础

JavaScript 必须在 DOM 元素定义完成后才能对其执行操作，该问题在“javascript执行顺序”https://www.jb51.net/article/44577.htm 一文中有详细介绍。

jQuery通过document.ready机制确保代码在DOM元素加载完成后执行。例如在基础教程中使用的jQuery代码如下：

<!-- $(document).ready(function ()
         {   
alert("我的第一个jQuery代码!");
         });   
// -->

该代码的作用是：当DOM树加载完毕后，弹出警告信息。

document.ready与onload的区别

document.ready()与传统<body onload="load()">方法类似，但关键区别在于：onload事件需等待页面所有元素（包括图片等外部资源）加载完成后才触发，

因此，document.ready()的执行速度通常快于onload()。

使用注意事项与多次注册

最后需注意两点（源自jQuery官方文档）：

1. 确保<body>元素的onload事件中没有注册函数，否则可能导致$(document).ready()事件无法触发。（作者尝试通过示例演示此情况但未成功，故认为该情形仅可能发生。）

<html>
<head>
<title>My second jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //下面是load的函数含有jquery注册函数$
function load(){ $("p").append("<b>Hello</b>"); }
//下面是jQuery的代码
$(document).ready(function ()
{ $("p").append("我的第一个jQuery代码!"
);  
$("p").append("<b>Hello</b>"); }); // -->
</mce:script>
</head>
<body onload="load()">
<h2>jQuery 简单例子2</h2>
<p>I would like to say: </p>
</body>
</html>

2. 同一页面中可无限次使用$(document).ready()事件，其中注册的函数将严格按照代码中的先后顺序依次执行。