【JS:window.onload的使用介绍】在JavaScript中，`window.onload` 是一个非常常见的事件处理函数，用于在页面完全加载完成后执行某些操作。它确保了页面中的所有元素（包括图片、脚本、样式表等）都已加载完毕，从而可以安全地访问和操作这些元素。
一、总结
`window.onload` 是一个事件处理函数，当浏览器窗口或整个页面（包括所有资源）加载完成时触发。它可以用来执行初始化代码、绑定事件、动态加载内容等。与 `DOMContentLoaded` 事件不同，`window.onload` 会等待所有资源加载完毕，因此执行时间较晚。
以下是 `window.onload` 的一些常见用法和注意事项：
| 特性 | 说明 |
| 触发时机 | 页面及其所有资源（如图片、脚本、样式表）加载完成后触发 |
| 用途 | 执行需要等待整个页面加载完成的代码，例如初始化脚本、DOM操作等 |
| 与 DOMContentLoaded 的区别 | `DOMContentLoaded` 在DOM结构加载完成后立即触发，而 `window.onload` 等待所有资源加载完成 |
| 多次赋值 | 如果多次为 `window.onload` 赋值，只有最后一次生效 |
| 与 jQuery 的区别 | jQuery 中的 `$(document).ready()` 对应 `DOMContentLoaded`，而 `$(window).on('load')` 对应 `window.onload` |
二、使用示例
```javascript
// 基本用法
window.onload = function() {
console.log("页面加载完成！");
};
// 或者添加多个事件监听器
window.addEventListener('load', function() {
console.log("页面加载完成！");
});
```
三、注意事项
1. 性能影响：由于 `window.onload` 会等待所有资源加载完成，因此不建议在该事件中执行耗时操作。
2. 覆盖问题：如果在代码中多次设置 `window.onload`，后面的设置会覆盖前面的设置，需注意避免冲突。
3. 兼容性：`window.onload` 兼容性良好，适用于大多数现代浏览器及旧版浏览器。
四、适用场景
- 初始化页面上的 JavaScript 功能
- 加载外部资源（如图表、地图等）
- 动态生成页面内容
- 执行依赖于完整页面结构的代码
通过合理使用 `window.onload`，可以确保在页面完全准备好之后再执行相关逻辑，提高代码的稳定性和可维护性。