window.onload和$(document).ready的区别

window.onload和$(document).ready的区别

@(JavaScript)[笔记]

---

JavaScript的原生加载API window.onload和JQuery的加载API $(document).ready

1，window.onload和$(document).ready执行时间不同

当文档完全下载到浏览器中时，会触发window.onload事件。这意味着页面上的全部元素（包括图片等的资源）对JavaScript而言都是可以操作的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。

然而$(document).ready在DOM节点树加载完成之后立即执行。通过$(document).ready()注册的事件处理程序，则会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。换句话说，当HTML下载完成并解析为DOM树之后，代码就可以运行。

所谓的加载完成：使用$(document).ready()要优于使用onload事件处理程序，但必须要明确的一点是，因为支持文件可能还没有加载完成，所以类似图像的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性，可能就得选择实现一个onload事件处理程序（或者是使用jQuery为load事件设置处理程序）。这两种机制能够和平共存。

JQuery中有关加载的事件：
ready() 当HTML文档加载完成时触发
load() HTML所有组件全部加载完成时触发
unload() 当浏览器窗口关闭或用户单击一个新链接或在地址栏输入新网址即将打开一个新页面时触发（在表单填写的时候特别有效）

---

2，使用的次数不同

window.onload = function() {}只会调用一次，就是再次调用的时候会覆盖之前的函数内容

window.onload = function() {
    console.log('first-onload');
}
window.onload = function() {
    console.log('second-onload');
}
//输出：second-onload

然而$(document).ready(function(){}) 可以多次调用
每次调用这个方法都会向内部的行为队列中添加一个新函数，当页面加载完成后，所有函数都会被执行。而且，这些函数会按照注册它们的顺序依次执行。

$(document).ready(function() {
console.log('first-ready');
});
$(document).ready(function() {
    console.log('second-ready');
});
//输出：
//first-ready
//second-ready

还有的就是$(document).ready(function(){})可以写成$(function(){})
官方文档document-ready