页面加载完成事件对比

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