加载页面时调用函数 - JavaScript

在 JavaScript 中，我们可以通过添加事件监听器，在页面加载时调用函数。这个功能非常有用，特别是当我们需要在页面加载完成后执行一些操作时。

1. 使用 window.onload

一种常见的方式是使用 window.onload 事件，该事件会在所有页面元素（如图片、样式文件等）都加载完成后触发。

window.onload = function() {
  // 在这里放置需要在页面加载完成后执行的代码
};

上述代码中，我们指定了当 window 对象的 onload 事件发生时，要执行的函数。在函数体内，我们可以添加需要在页面加载完成后执行的代码。

需要注意的是，如果在 window.onload 事件触发前添加了新的事件监听器，那么这些监听器会覆盖原来的事件监听器。因此，为了确保代码的正确执行，我们应该在上面的代码中进行统一处理，这样就可以保证函数不会被其他代码覆盖。

2. 使用 DOMContentLoaded

除了使用 window.onload，我们还可以使用 DOMContentLoaded 事件来检测文档的加载状态，该事件会在 DOM 文档加载完成后立即触发。这也意味着在页面的大部分元素加载完成之前，我们就可以开始执行 JavaScript 代码。

document.addEventListener("DOMContentLoaded", function() {
  // 在这里放置需要在 DOMContentLoaded 事件触发时执行的代码
});

上述代码中，我们指定了当文档的 DOMContentLoaded 事件触发时，要执行的函数。在函数体内，我们可以添加需要在 DOM 加载完成后执行的代码。

需要注意的是，如果浏览器不支持 DOMContentLoaded 事件，我们可以在代码中添加 fall-back 代码，以便使用 window.onload 事件来代替它。

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", function() {
    // 在这里放置需要在 DOMContentLoaded 事件触发时执行的代码
  });
} else {
  window.onload = function() {
    // 在这里放置需要在页面加载完成后执行的代码
  };
}

上述代码中，我们检查了文档的加载状态。如果文档还在加载中，则添加 DOMContentLoaded 事件监听器。否则，使用 window.onload 事件来代替。

3. 总结

在 JavaScript 中，我们可以使用 window.onload 或 DOMContentLoaded 事件，在页面加载完成后调用函数。这个功能非常有用，可以确保我们的代码在正确的时间点执行，并且可以避免一些常见的错误。如果需要在页面加载时执行某些操作，我们可以参考上述示例代码，选择最适合自己的方式。