JavaScript中window.onload事件与document.ready事件的区别

window.onload 事件与 document.ready 事件对比

区别一：提供者

• window.onload 事件是一个JavaScript内置的事件；
• document.ready 事件是 jQuery 提供的一个事件。

区别二：执行顺序

• document.ready 事件会在 DOM （不包括图片等内容）加载完成后被触发；
• window.onload 事件会等所有内容（包括图片等）加载完成后才会被触发，因此它比 document.ready 事件稍晚一些。

示例：

jQuery 中 document.ready 事件的书写方式

jQuery 中 document.ready 事件的书写方式有两种（这两种方式是等价的）：

// 方式一：A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});

// 方式二：Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});

参考：

• https://learn.jquery.com/using-jquery-core/document-ready/
• https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready