onready&onload&readyState

document.readyState ：述了文档的加载状态,当该属性值发生变化时，会在document 对象上触发readystatechange事件 ^[1]
loading 正在加载，document仍在加载;
interactive可交互，文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载
complete文档和所有子资源已完成加载。表示 load 状态的事件即将被触发

$(document).ready：文档下载完成，已解析为DOM树时执行^[2]

// 可以写多个，都会执行
// jquery:
$(document).ready(function(){

}); // 也可写为 $(function(){ }) 
// document.readyState 模拟
document.onreadystatechange = function(event){
  if("interactive"===document.readyState) {
    // 模拟 onready
    // do something
  }
}

$(document).load：文件加载完时执行，如图片的宽高属性此时有效 ，也可以绑定在其他元素上，则该元素加载完毕后执行

// 若写了多个，只执行最后一个
// jquery:
$(document).load(function(){

}); 
// 原生写法
document.onload = function(event){}; 
// document.readyState 模拟
document.onreadystatechange = function(event){
  if("complete"===document.readyState) {
    // 模拟 onload
    // do something
  }
}

参考文章

1. document.readyState ↩

2. onready和onload的区别 ↩