Question

document.ready和onload的区别

Answer 1

document.ready和onload的区别

最简单的就是 执行时间
window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到载入完毕。

多次呼叫 document.ready 的话，文件载入完成以后回拨会被依次呼叫。
onload=f1
onload=f2
这样的话，文件载入完成以后只会呼叫f2.

页面载入完成有两种事件，一是ready，表示文件结构已经载入完成（不包含图片等非文字媒体档案），二是onload，指示页面包含图片等档案在内的所有元素都载入完成。
一般情况下一个页面响应载入的顺序是，域名解析-载入-载入js和css-载入图片等其他资讯。
1. Dom Ready应该在“载入js和css”和“载入图片等其他资讯”之间，就可以操作Dom了。
2. Dom Load 在document文件载入完成后就可以可以对DOM进行操作，document文件包括了载入图片等其他资讯。Dom Load就是在页面响应载入的顺序中的“载入图片等其他资讯”之后，就可以操作Dom了
最常用的例子说明Dom Ready和Dom Load两者的区别
1. Dom Ready是在dom载入完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片载入完成，就可以设定图片的宽高的属性或样式等
2. Dom Load是在整个document文件（包括了载入图片等其他资讯）载入完成后就可以直接对dom进行操作，比如一张图片要等这个图示载入完成之后才能设定图片的宽高的属性或样式等；

不是，
window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到所有元素载入完毕。
另外window.onload只能有一个，如果有多只会执行一个；
$(document).ready()可以同时有多个，并且都可以得到执行

• window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行，$(document).ready()是DOM结构绘制完毕后就执行，不必等到载入完毕

• window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个，$(document).ready()可以同时编写多个，并且都可以得到执行

• window.onload没有简化写法，$(document).ready(function(){})可以简写成$(function(){})

没有区别毫不相关的三个单词
1document.
n. 档案；vt. 用档案证明；为…提供档案
2ready
adj. 准备好的，现成的; 即时的，敏捷的; 情愿的; 即将的;
vt. 做好…的准备;
adv. 预先; 已完成地
3onload
vt. 装载

这两种事件都代表的是页面文件载入时触发的，但两者之间区别在于：
ready 事件的触发，表示文件结构已经载入完成（不包含图片等非文字媒体档案）。
onload 事件的触发，表示页面包含图片等档案在内的所有元素都载入完成。
进一步的详细描述，请参阅以下资料：
:php100.program/jquery/2013/0905/5954.

谈谈document.ready和window.onload的区别

(document).ready(...) 和 window.onload 事件虽然具有类似的效果，但是，它们在触发操作的时间上存在着微妙的差异。
window.onload
当一个文件完全下载到浏览器中时，会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的，这种情况对编写功能性的程式码非常有利，因为无需考虑载入的次序。
(document).ready()
通过 $(document).ready() 注册的事件处理程式，则会在 DOM 完全就绪并可以使用时呼叫。虽然这也意味着所有元素对指令码而言都是可以访问的，但是，缺不意味着所有关联的档案都已经下载完毕。换句话说，当 HTML 下载完成并解析为 DOM 树之后，程式码就可以执行。
例：
假设有一个页面，表现的是相簿，这种页面中会包含许多大型影象，我们可以通过 jQuery 隐藏、显示或以其他方式操纵这些影象。如果我们通过 onload 事件设定介面，那么使用者在能够使用这个页面之前，必须要等到每一幅影象都下载完成。
如果行为尚未新增给那些具有预设行为的元素（例如连结），那么使用者的互动可能会导致意想不到的结果。然而，当我们使用 $(document).ready() 进行设定时，这个介面就会更早地准备好可用的正确行为。
使用 $(document).ready() 一般来说都要优于使用 onload 事件处理程式，但必须要明确的一点是，因为支援档案可能还没有载入完成，所以类似影象的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性，可能就得选择实现一个 onload 事件处理程式（或者更类似于 jQuery 中 .load() 的等效方法）。