JavaScript 页面加载完后执行

在 Web 开发中，我们经常需要在页面加载完之后执行一些 JavaScript 代码。这个需求通常出现在需要操作 DOM 元素、发送请求或者执行其他与页面交互相关的任务时。本文将介绍如何在页面加载完之后执行 JavaScript 代码，并提供一些示例代码来帮助理解。

页面加载事件

在了解如何执行 JavaScript 代码前，我们先来了解一下页面加载事件。当浏览器加载一个页面时，会触发一系列的事件。其中最常用的事件是 DOMContentLoaded 和 load。

  • DOMContentLoaded 事件在解析完整个 HTML 文档并构建了 DOM 树后触发。这意味着此时 DOM 元素已经可以被访问和操作了，但是一些外部的资源（如图片、样式表和脚本文件）可能还没有加载完全。
  • load 事件在页面的所有资源（包括图片、样式表和脚本文件）都加载完成后触发。此时页面的所有内容都已经准备好，可以进行各种操作。

基本用法

要在页面加载完后执行 JavaScript 代码，我们可以将代码放在 DOMContentLoaded 或 load 事件的事件处理函数中。下面是一个基本的示例：

document.addEventListener('DOMContentLoaded', function() {
  // 在页面加载完后执行的代码
});

// 或者

window.addEventListener('load', function() {
  // 在页面加载完后执行的代码
});

上述代码中，我们使用 addEventListener 方法为 DOMContentLoaded 和 load 事件添加了一个事件处理函数。当相应的事件发生时，事件处理函数中的代码将被执行。

示例

操作 DOM 元素

在页面加载完之后，我们可以通过 JavaScript 来操作 DOM 元素。下面是一个示例，通过改变页面标题的文字颜色来演示：

document.addEventListener('DOMContentLoaded', function() {
  var title = document.querySelector('h1');
  title.style.color = 'red';
});

发送请求

另一个常见的用例是在页面加载完后发送请求。例如，我们可以使用 XMLHttpRequest 对象来与服务器进行通信，获取数据并更新页面。下面是一个简单的示例，使用 GET 请求获取服务器上的 JSON 数据：

document.addEventListener('DOMContentLoaded', function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '
  xhr.onload = function() {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      // 处理数据并更新页面
    }
  };
  xhr.send();
});

执行动画效果

在页面加载完后，我们可以使用 JavaScript 创建动画效果，为页面增加一些交互性。下面是一个示例，使用 CSS 动画使一个元素在页面加载后淡入：

document.addEventListener('DOMContentLoaded', function() {
  var element = document.querySelector('.fade-in');
  element.classList.add('fadeInAnimation');
});

.fade-in {
  opacity: 0;
}

.fadeInAnimation {
  animation-name: fadeIn;
  animation-duration: 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

上述代码中，我们使用 CSS 动画和 JavaScript 将一个元素的初始透明度设为 0，然后在页面加载完后添加一个动画类，使其渐变为完全不透明。

总结

在本文中，我们介绍了如何在页面加载完之后执行 JavaScript 代码。我们讨论了 DOMContentLoaded 和 load 事件，并提供了一些示例代码来帮助理解。通过在页面加载完成后执行 JavaScript 代码，我们可以操作 DOM 元素、发送请求或者执行其他与页面交互相关的任务。希望本文对你理解 JavaScript 页面加载事件有所帮助。

参考文档

  • [DOMContentLoaded](
  • [load](