Mikel
[转载]JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！ – Jason Cai – 博客园.
由于项目需要，使用JQuery也有相当一段时间了。由于经常要处理DOM节点加载、图片显示以及动态资源请求，所以对$(document).ready(function(){})理解也越来越深了，所有在此分享我的一些体会：
1. $(document).ready(function(){…}) 此方法是JQuery版本的window.onload = function(){…}。
1.1 $(document).ready(function(){…})的其他两种缩写形式： $().ready(function(){…})【这种写法官方文档上说不建议使用】 和 $(function(){…})。
1.2 $(document).ready(function(){…})与window.load执行顺序：$(document).ready(…)是在页面加载完所有DOM节点文档结构后开始执行，window.onload则是在页面加载所有资源后 才开始执行。也就是说window.onload要等到所有图片，外链资源都加载完后才开始执行，也因此window.onload只允许定义一个（实际 是可以定义多个，但只有最后一个有效，相当于前面会被覆盖掉），而$(function(){…})可以允许定义多个，并且按照定义的先后顺序先后执 行。对于大部分应用情况下，$(function(){…})可以说完胜window.onload，因此其执行时间早，用户体验就更好。但是在一些 特定情况下，情况不一定，在下面第2节会举例说明。
2. $(document).ready(function(){…})不好使或者说不如window.onload的情况：
2.1 因为$(document).ready(function(){…})是在一旦DOM节点加载完后就开始执行，但是如何页面中引用的其他的JS脚 本，并且修改了一些DOM节点结构，那么这个时候$(document).ready(function(){..})就有可能无法检测到实际的节点。例 如：
<html>
<head>
<script src="/Scripts/MyJS.js?v=1.0.0>" type="text/javascript"></script>
<script type="text/javascript"> $(function(){...}); </script>
</head>
<body>
...
<div>
....
</div>
....
</body>
</html>
在MyJs.js中有对应的代码将上述代码中的绿色DIV加上class = “title2″属性。这个时候可能由于MyJs.js比较大，在执行$(function(){….})时，MyJs.js还没加载完，我如果在$(function(){…}中就无法使用$(“div.title2”)等来进行选择节点。当然，你可以在执行$(“div.title2”)代码之前加上定时器进行解决这种情况，但是由于不知道要等多长时间才能获取得到div.title2，因此这种方法也不能完全解决（你可能已经想到另一种解决方法了，那就是可以采用setInternal来解决这个问题了，实际上也确实可以，我自己也使用过此方法解决过实际问题，尤其是一些图片显示的）。此时如果你用window.onload就不会有这个烦恼了！
2.2 另一种情况就是有一些页面中可以会嵌入一些web service，这个情况下，使用$(function(){…})也可能无法获取到web service请求后的对应的DOM节点，其原因与2.1类似，不再赘述。
这是我自己在运用jQuery解决实际一些问题时的一些体会，如果有不对之处，欢迎大家指出加入改正，分享！
