页面加载完成事件对比
window.onload 与 $(document).ready 的区别和使用场景
问题
window.onload 和 $(document).ready 有什么区别？分别在什么场景下使用？
解答
触发时机
// window.onload：等待所有资源加载完成（图片、样式表、iframe 等）
window.onload = function() {
console.log('所有资源加载完成');
};
// $(document).ready：DOM 解析完成即触发，不等待图片等资源
$(document).ready(function() {
console.log('DOM 解析完成');
});
// 简写形式
$(function() {
console.log('DOM 解析完成');
});执行顺序演示
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<img src="large-image.jpg" />
<script>
$(document).ready(function() {
console.log('1. ready 触发'); // 先执行
});
window.onload = function() {
console.log('2. onload 触发'); // 后执行
};
</script>
</body>
</html>多次绑定的区别
// onload 会被覆盖，只执行最后一个
window.onload = function() {
console.log('第一个'); // 不会执行
};
window.onload = function() {
console.log('第二个'); // 只执行这个
};
// ready 可以绑定多个，都会执行
$(document).ready(function() {
console.log('第一个'); // 执行
});
$(document).ready(function() {
console.log('第二个'); // 也执行
});原生替代方案
// 用 addEventListener 解决 onload 覆盖问题
window.addEventListener('load', function() {
console.log('第一个');
});
window.addEventListener('load', function() {
console.log('第二个');
});
// DOMContentLoaded 是 ready 的原生实现
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM 解析完成');
});实际应用场景
// 需要操作图片尺寸时，用 onload
window.addEventListener('load', function() {
const img = document.querySelector('img');
console.log(img.width, img.height); // 能获取到正确尺寸
});
// 只需要操作 DOM 时，用 DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('button').addEventListener('click', handler);
});关键点
window.onload等待所有资源加载，ready只等 DOM 解析完成ready触发更早，页面响应更快onload直接赋值会覆盖，ready和addEventListener可多次绑定- 原生
DOMContentLoaded等同于$(document).ready - 需要获取图片尺寸等资源信息时用
load，其他情况优先用DOMContentLoaded
目录