document.onload和document.ready两个事件的区别document.onload和documen

document.onload和document.ready两个事件的区别

在 JavaScript 和 jQuery 中，document.onload 和 document.ready（或 $(document).ready()）是两个常用的事件，但它们的行为和触发时机有显著区别。以下是它们的详细对比：

1. document.onload

(1) 定义

window.onload：当整个页面（包括 HTML、CSS、图片、脚本等）完全加载后触发。
document.onload：通常指 window.onload，因为 document 对象没有直接的 onload 事件。

(2) 触发时机

页面所有资源（如图片、样式表、脚本等）加载完成后触发。

(3) 代码示例

window.onload = function() {
  console.log('页面完全加载完成');
};

(4) 特点

优点：确保所有资源加载完成后再执行脚本。
缺点：如果页面资源较多（如图片、视频），可能导致脚本延迟执行。

2. document.ready

(1) 定义

$(document).ready()：jQuery 提供的方法，当 DOM 树加载完成后触发（无需等待图片等资源加载）。
原生 JavaScript 替代：DOMContentLoaded 事件。

(2) 触发时机

当 HTML 文档完全解析并构建 DOM 树后触发，无需等待外部资源（如图片）加载。

(3) 代码示例

jQuery：

$(document).ready(function() {
  console.log('DOM 加载完成');
});

原生 JavaScript：

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 加载完成');
});

(4) 特点

优点：尽早执行脚本，提升用户体验。
缺点：无法访问未加载的资源（如图片尺寸）。

3. 主要区别

特性	`window.onload`	`$(document).ready()` / `DOMContentLoaded`
触发时机	页面所有资源加载完成后触发	DOM 树构建完成后触发，无需等待资源加载
执行速度	较慢（需等待所有资源加载）	较快（只需 DOM 解析完成）
适用场景	需要操作图片、样式等资源的场景	需要尽早操作 DOM 的场景
兼容性	所有浏览器支持	`DOMContentLoaded` 支持现代浏览器，jQuery 兼容性更好
多次绑定	会覆盖之前的事件处理函数	可多次绑定，不会覆盖

4. 示例对比

(1) window.onload

window.onload = function() {
  console.log('页面完全加载完成');
  const img = document.getElementById('myImage');
  console.log('图片宽度：', img.width); // 可以获取图片尺寸
};

(2) $(document).ready()

$(document).ready(function() {
  console.log('DOM 加载完成');
  const img = document.getElementById('myImage');
  console.log('图片宽度：', img.width); // 可能为 0（图片未加载完成）
});

(3) DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 加载完成');
  const img = document.getElementById('myImage');
  console.log('图片宽度：', img.width); // 可能为 0（图片未加载完成）
});

5. 使用建议

尽早操作 DOM：使用 $(document).ready() 或 DOMContentLoaded。
操作资源：使用 window.onload。
多次绑定：$(document).ready() 支持多次绑定，而 window.onload 会覆盖之前的事件处理函数。

总结

场景	使用 `window.onload`	使用 `$(document).ready()` / `DOMContentLoaded`
触发时机	页面所有资源加载完成后	DOM 树构建完成后
执行速度	较慢	较快
适用场景	需要操作图片、样式等资源的场景	需要尽早操作 DOM 的场景
兼容性	所有浏览器支持	`DOMContentLoaded` 支持现代浏览器，jQuery 兼容性更好
多次绑定	会覆盖之前的事件处理函数	可多次绑定，不会覆盖

根据具体需求选择合适的事件，可以提升页面性能和用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github