window.onload 是一种常见的 JavaScript 事件，用于在页面加载完毕后执行一些操作。它会在浏览器加载完成整个页面（包括所有图像、样式表、脚本等资源）之后被触发。

基本用法

window.onload = function() {
    alert("页面已加载完成!");
};

在这个示例中，页面加载完成后，会弹出一个提示框显示 “页面已加载完成!”。

详细解释

  • window.onload 是 window 对象的一个事件处理程序。它指定当页面加载完成时执行的回调函数。
  • 当页面的所有内容（包括 HTML、CSS、图片、JavaScript 文件等）都已完全加载时，onload 事件才会被触发。

例子：修改页面内容

window.onload = function() {
    document.getElementById("welcomeMessage").innerText = "欢迎访问我们的网站！";
};

在这个例子中，当页面加载完成后，会找到 ID 为 welcomeMessage 的元素，并修改其文本内容。

注意事项

  1. 替代方法： 在现代 JavaScript 中，使用 addEventListener 绑定事件处理器是一种更为推荐的做法，避免覆盖现有的事件处理函数。 window.addEventListener('load', function() { alert("页面加载完成！"); });
  2. 页面资源加载时机： window.onload 会等所有资源（如图片、外部脚本）完全加载后才触发。如果只需要在 DOM 树完全构建时执行代码，可以使用 DOMContentLoaded 事件。 document.addEventListener('DOMContentLoaded', function() { alert("DOM 完全加载！"); });

为什么选择 window.onload？

window.onload 是一种确保页面资源完全加载后再执行某些操作的好方法。例如，你可能需要在页面加载完成后执行一些复杂的布局调整或操作图像、表单等资源。

如果你有其他问题或想了解更深入的细节，随时告诉我！