本文详解如何在使用 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 不变：
function showLoad() {
loader.classList.add('display'); // ✅ 现在 .display 规则独立生效
}
function hideLoad() {
loader.classList.remove('display');
}? 补充最佳实践建议：
- 避免 .then().then() 中隐藏加载器的时机偏差：当前代码在 response.json() 解析完成后才调用 hideLoad()，但若 JSON 解析耗时（罕见）或后续 DOM 操作阻塞，仍可能导致加载器停留过久。更健壮的方式是在 fetch() 链顶端（即 .then(response => {...}) 内部）就处理响应状态，并统一在最后 .catch() 和主流程末尾都调用 hideLoad()：
function getWeather() {
showLoad();
fetch(`http://api.weatherapi.com/v1/current.json?key=XXXXXXX&q=${input.value}&aqi=no`)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(res => {
let celsius = 'Temp ' + res.current.temp_c + ' °C';
divId.innerHTML = celsius;
})
.catch(err => {
divId.innerHTML = '获取天气失败：' + err.message;
})
.finally(() => {
hideLoad(); // ✅ 确保无论成功失败都关闭加载器
});
}增强可访问性（a11y）：为加载器添加 aria-busy="true" 属性，并在隐藏时移除，有助于屏幕阅读器识别加载状态。
防重复提交：点击搜索按钮后可临时禁用按钮（searchButton.disabled = true），并在 finally 中恢复，防止用户连续点击触发多个并发请求。
综上，预加载器不显示的表象背后，本质是 CSS 类控制逻辑与 DOM 更新时机的协同问题。通过解耦样式规则、使用 !important 保障显隐确定性，并配合 finally 统一收尾，即可实现流畅、可靠、专业的加载体验。
