JS 判断页面加载完成方法总结
在原生 JavaScript 中，判断当前页面完全加载完毕有几种常用方法：
1. 使用 window.onload 事件
window.onload = function() {
// 页面所有资源（包括图片、CSS等）加载完成后执行
console.log('页面完全加载完毕');
};
2. 使用 addEventListener（现代化 Javascript 方式推荐）
window.addEventListener('load', function() {
// 页面完全加载后执行
console.log('所有资源加载完成');
});
3. 仅 DOM 加载完成（不等待图片等资源）
document.addEventListener('DOMContentLoaded', function() {
// DOM 解析完成时触发（无需等待样式表/图片等）
console.log('DOM 加载完成');
});
JS 判断页面加载完成说明：
- window.onload 会等待所有资源（图片/iframe/CSS等）加载完成
- DOMContentLoaded 在 DOM 树构建完成后立即触发，不等待外部资源：如果不需要等待图片等资源加载，使用 DOMContentLoaded 会让用户感觉页面响应更快。
- 现代开发中推荐使用 addEventListener 而非 onload，因为后者会覆盖之前定义的同类事件
完整示例：
// DOM 就绪时执行
document.addEventListener('DOMContentLoaded', init);
function init() {
console.log('DOM 准备就绪');
// 完全加载后执行
window.addEventListener('load', function() {
console.log('所有资源加载完成');
// 可以在这里执行需要依赖完整页面的操作
});
}
其他使用 jQuery 方式：
<script type="text/javascript">
$(function () {
...
});
</script>