onready&onload&readyState
2019-07-22 本文已影响0人
维仔_411d
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
}
}
