点击Menu option1时显示加载动画（throbber）的实现问题

我需要实现点击页面中的Menu option1 div元素时，立即显示加载动画。点击该元素后页面会重新加载，等待过程包含三个阶段：向服务器发送请求、服务器处理并返回响应、页面加载完成。但目前的代码只能在最后页面加载阶段看到动画，这仅占等待时长的一小部分，请问该如何修改才能实现点击后立刻显示动画？

模拟慢加载的方法 #

• 打开Chrome开发者工具（快捷键Shift+Ctrl+J），依次进入「Network」→「Throttling」→选择「Slow 3G」
• 在HTML中添加额外元素：

<div class="Menu4" style="border: solid;width:100px;">Menu option4</div>

当前代码示例 #

JavaScript

// 页面加载完成后隐藏加载动画
window.addEventListener("load", () => {
  document.querySelector(".loader").classList.remove("loader-active");
});

CSS

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .5);
}

.loader-active {
  display: flex;
}

.loader::after {
  content: "";
  width: 180px;
  height: 180px;
  background-image: url("https://tradinglatam.com/wp-content/uploads/2019/04/loading-gif-png-4.gif");
}

HTML

<div class="Menu1" style="border: solid;width:100px;">Menu option1</div>
<div class="Menu2" style="border: solid;width:100px;">Menu option2</div>
<div class="Menu3" style="border: solid;width:100px;">Menu option3</div>
<div class="loader loader-active"></div>

解决方法 #

核心思路是在点击Menu option1的瞬间就触发加载动画，而不是等到新页面开始加载时才显示。具体修改如下：

1. 调整HTML中loader的初始状态，移除默认的loader-active类（初始隐藏动画）：

<div class="loader"></div>

2. 在JavaScript中添加Menu1的点击事件监听器，点击时立即激活加载动画；同时保留页面加载完成后隐藏动画的逻辑：

// 页面加载完成后隐藏加载动画
window.addEventListener("load", () => {
  document.querySelector(".loader").classList.remove("loader-active");
});

// 点击Menu option1时立即显示加载动画
document.querySelector(".Menu1").addEventListener("click", () => {
  document.querySelector(".loader").classList.add("loader-active");
  
  // 如果该菜单是用于跳转页面，这里可以保留原跳转逻辑（比如location.href = ...）
  // 浏览器会先渲染加载动画，再执行页面跳转
});

3. 如果Menu1原本是通过链接跳转（比如包裹在<a>标签里），需要阻止默认跳转行为，先显示动画再手动触发跳转：

document.querySelector(".Menu1").addEventListener("click", (e) => {
  // 阻止默认跳转行为
  e.preventDefault();
  // 显示加载动画
  document.querySelector(".loader").classList.add("loader-active");
  // 延迟一小段时间（可选，确保动画渲染完成）后跳转
  setTimeout(() => {
    window.location.href = e.target.href;
  }, 100);
});

这样修改后，点击Menu option1的瞬间就能看到加载动画，覆盖整个等待过程（包括请求发送、服务器处理和页面加载阶段）。

内容的提问来源于stack exchange，提问作者Mr_G