加载动画未显示：点击按钮后Alert正常但等待阶段无加载动画

问题根源 #

你遇到的加载动画不显示问题，核心原因有这几点：

• 直接修改DOM元素的display属性无效，必须通过style.display来控制样式
• alert()会阻塞浏览器渲染线程，动画还没来得及渲染就被暂停了
• CSS里定义的.loader类没应用到HTML的加载元素上
• 缺少旋转动画的关键帧定义（@keyframes spin）
• HTML里的CSS和JS引用被注释掉了，根本没加载资源

修复后的完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="loading.css" rel="stylesheet" />
  <script src="script.js" type="text/javascript"></script>
</head>
    
<body>
  <div id="loading-overlay">
    <div id="loader" class="loader"></div>
    <p id="error-div"></p>
  </div>
  <button type="button" id="button_queue_go" onclick="refreshStatus();">Show Status</button>
</body>
</html>

CSS #

/* loading.css */

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
}
.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#error-div {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  background-color: #ff4444;
  color: white;
  z-index: 20;
  display: none;
}

JavaScript #

/* script.js */

async function refreshStatus() {
  const loadingOverlay = document.getElementById("loading-overlay");
  const loader = document.getElementById("loader");
  const errorDiv = document.getElementById("error-div");

  // 先隐藏错误提示
  errorDiv.style.display = "none";
  
  // 显示加载动画
  loadingOverlay.style.display = "flex";
  loader.style.display = "block";

  // 去掉alert，它会阻塞渲染；要提示的话自己做个非阻塞弹窗
  // alert("trying");

  try {
    await new Promise(r => setTimeout(r, 2000));
    // 记得把the_url换成你的实际接口地址
    const response = await fetch(
      the_url, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({"ok": "yes"})
      }
    );

    // 请求完成后关闭加载动画
    loadingOverlay.style.display = "none";
    loader.style.display = "none";

    // 这里可以添加响应数据处理逻辑
    const data = await response.json();
    console.log(data);
  }
  catch (_error) {
    loadingOverlay.style.display = "none";
    loader.style.display = "none";
    errorDiv.style.display = "block";
    errorDiv.innerHTML = _error.message;
    return;
  }
}

重点修复说明 #

1. 样式设置方式更正：所有DOM元素的显示/隐藏都用element.style.display，而非直接修改element.display
2. 移除alert：这个弹窗会卡死浏览器渲染，想要提示就用自定义的非阻塞弹窗组件
3. CSS类匹配：给加载元素加上class="loader"，让CSS旋转样式生效
4. 补充动画关键帧：没有@keyframes spin，旋转动画无法正常运行
5. 完善遮罩布局：给加载遮罩添加全屏定位和居中属性，提升用户体验
6. 取消资源注释：确保CSS和JS文件能正常加载，否则所有样式和逻辑都无效
7. 统一状态处理：请求成功/失败后都关闭加载动画，避免界面卡住

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