如何在 Fetch 请求期间正确显示加载指示器（Preloader）-html教程

本文详解如何在使用 javascript fetch api 请求数据时，确保加载动画（如旋转圆圈）能及时显示与隐藏，重点解决因 css 选择器优先级或类名匹配错误导致的预加载器不显示问题。

在使用 fetch() 发起异步请求时，常希望用户界面立即反馈“正在加载”状态——例如显示一个旋转的加载动画（preloader）。但很多开发者会遇到：调用 showLoad() 后，页面却未渲染出加载元素，直到数据返回才一闪而过。根本原因往往不在 JavaScript 逻辑，而在 CSS 类名应用与样式覆盖的细节。

你提供的代码中，showLoad() 正确地为 #load 元素添加了 ‘display’ 类，而 CSS 定义却是：

#load.display {
    display: block;
}

⚠️ 这里存在关键问题：#load.display 是一个复合选择器，它要求元素同时具有 ID load 和类名 display 才生效。但你的 HTML 中该元素仅写为

，初始状态下并无 display 类——这本身没错；可一旦 JS 添加 display 类，该规则理应匹配。看似合理？实则隐患在于：CSS 中 #load 的原始样式已设 display: none，而 #load.display 的权重虽高，但若浏览器解析或样式层叠出现延迟/冲突，仍可能失效。更稳妥、标准且符合语义的做法是：将显示控制权完全交给类名，而非依赖 ID + 类组合。

✅ 正确做法是将 CSS 改为：

#load {
    border: 5px solid #f3f3f3; 
    border-top: 5px solid #3498db; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin-left: 160px;
    display: none; /* 默认隐藏 */
}

.display {
    display: block !important; /* 强制显示，避免被其他规则覆盖 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

同时保持 JS 不变：