加载完成包含两种含义:
- DOM构建完成,不包含图片、样式和其它框架,也就是我们常说的DOMContentLoaded事件。
- 页面依赖的所有资源记载完成,也就是我们常说的window.onload事件。
判断ready的方法:
- 监听
document
的onreadystatechange
,判断readyState
document.onreadystatechange = function () {
if(document.readyState === 'complete'){
console.log("On document.onreadystatechange");
}
};
或者
document.addEventListener('readystatechange' , function () {
if(document.readyState === 'complete'){
console.log("On document.onreadystatechange");
}
});
ps: on开头的事件既可以通过domObj.onEventName
的形式也可以通过domObj.addEventListener(‘eventName' ,function(){})
的形式监听。两者的区别是:onEventName重复添加同一事件,只会触发最后添加的事件。addEventListener添加的事件都会出发,先添加的先触发。
- 监听
document
的ready
事件
document.ready = function(){
console.log('document.ready');
};
- 监听
document
的DOMContentLoaded
事件
document.addEventListener('DOMContentLoaded', function () {
console.log("On DOMContentLoaded -2-");
});
ps:jquery的$(function(){})
和$(document).ready(function(){})
底层都是使用的DOMContentLoaded
事件。
执行顺序为:Jquery ready >(早于) document.ready > DOMContentLoaded > readystatechange
判断onload的方法:
- 监听
window
的onload
事件
window.onload = function () {
console.log("On window.onload");
};
- 监听
document.body
的onload
事件
document.body.onload = function () {
console.log("On document.body.onload");
};
请注意:onload 方式添加会产生覆盖效果(你可以把这两个事件认为是同一个事件),后添加的覆盖先添加的事件。addEventListener方式不会产生覆盖。
下面是完整测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断页面加载完成</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>
<div>
<button id="testButton">点我呀</button>
</div>
<script>
readyEvent();
onLoadEvent();
/**
* 测试事件覆盖
*/
function initButtonClick() {
document.getElementById('testButton').onclick = function () {
console.log('Trigger by onclick -1-');
};
document.getElementById('testButton').onclick = function () {
console.log('Trigger by onclick -2-');
};
document.getElementById('testButton').addEventListener('click', function () {
console.log('Trigger by addEventListener -1-');
});
document.getElementById('testButton').addEventListener('click', function () {
console.log('Trigger by addEventListener -2-');
});
}
/**
* 判断ready
*/
function readyEvent() {
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
console.log("On document.onreadystatechange -1-");
}
};
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
console.log("On document.onreadystatechange -2-");
}
};
document.ready = function(){
console.log('document.ready');
};
document.addEventListener('DOMContentLoaded', function () {
console.log("On DOMContentLoaded -1-");
});
document.addEventListener('DOMContentLoaded', function () {
console.log("On DOMContentLoaded -2-");
initButtonClick();
});
$(function () {
console.log('On Jquery Ready -1-');
});
$(function () {
console.log('On Jquery Ready -2-');
});
}
/**
* 判断loaded
*/
function onLoadEvent() {
document.body.onload = function () {
console.log("On document.body.onload -1-");
};
document.body.onload = function () {
console.log("On document.body.onload -2-");
};
window.onload = function () {
console.log("On window.onload -1-");
};
window.onload = function () {
console.log("On window.onload -2-");
};
window.addEventListener('load', function () {
console.log("On window.addEventListener load -1-");
});
window.addEventListener('load', function () {
console.log("On window.addEventListener load -2-");
});
}
</script>
</body>
</html>