在JavaScript中，`onload` 事件通常用于检测一个页面或其资源（如图片、脚本等）是否加载完成。这里我将介绍几种常见的使用 `onload` 的方法。
### 1. 页面加载完成后执行脚本
直接在HTML的`
`标签上使用`onload`属性。
<body onload="initPage()">
<!-- 页面内容 -->
<script>
function initPage() {
// 页面加载完成后执行的代码
console.log('页面加载完成');
}
</script>
</body>
### 2. 使用JavaScript添加事件监听器
通过JavaScript代码为`window`对象添加`load`事件监听器，这种方式更加灵活，因为它允许你在页面的任何位置（包括在`
`标签内）添加监听器。
<script>
window.onload = function() {
// 页面加载完成后执行的代码
console.log('页面加载完成');
};
</script>
或者，使用`addEventListener`来添加监听器，这种方式的好处是可以添加多个监听器而不会相互覆盖。
<script>
window.addEventListener('load', function() {
// 页面加载完成后执行的代码
console.log('页面加载完成');
});
</script>
### 3. 图片或其他资源加载完成后执行脚本
对于图片或其他需要加载的资源，可以在这些元素上使用`onload`属性。
<img src="image.jpg" onload="imageLoaded()" alt="示例图片">
<script>
function imageLoaded() {
// 图片加载完成后执行的代码
console.log('图片加载完成');
}
</script>
### 4. 使用jQuery的ready()方法（虽然不直接使用onload，但概念相似）
如果你在使用jQuery，可能会用到`$(document).ready()`方法，它类似于`window.onload`，但在DOM完全就绪时就会触发，而不需要等待所有资源（如图片、样式表等）加载完成。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// DOM就绪后执行的代码
console.log('DOM就绪');
});
</script>
注意：虽然jQuery的`ready()`方法不是直接使用`onload`，但它提供了一个在DOM加载完成后立即执行代码的便捷方式，这在很多情况下比等待所有资源加载完成要更有效率。