本文详解如何通过 css 类控制实现 fetch 请求过程中的加载状态展示，重点解决因选择器权重或类名匹配错误导致的加载动画不显示问题，并提供完整可运行的代码示例与最佳实践。
在使用 fetch 发起异步请求时，常需向用户反馈“正在加载”状态——典型做法是显示一个旋转加载动画（preloader）。但许多开发者会遇到：明明调用了 showLoad()，页面却始终看不到加载元素。问题往往不出在 JavaScript 逻辑本身，而在于 CSS 类名作用机制与选择器优先级。
回顾原始代码，关键问题出在以下 CSS 规则：
#load.display {
display: block;
}该规则要求元素同时具备 ID load 和类 display 才生效。但 HTML 中
并未预设任何类，而 JS 中仅通过 loader.classList.add('display') 添加了类名。表面看逻辑成立，实则存在隐性风险：若 .display 类被其他更具体的选择器（如 #load.display）覆盖，或浏览器解析时因 ID 选择器优先级高但匹配失败导致样式未生效，则 display: block 将不会应用。✅ 正确解法是解除对 ID 的强耦合，改用纯类选择器：
.display {
display: block !important; /* 推荐加 !important 防止被意外覆盖 */
}同时确保 HTML 中的 loader 元素结构清晰、可访问：
完整的、已修复的 JavaScript 逻辑如下（含错误处理与用户体验优化）：
const searchButton = document.getElementById('button');
const input = document.getElementById('input'); // ⚠️ 注意：原代码中未定义 input，需补充
const divId = document.getElementById('mainddiv');
const loader = document.getElementById('load');
function showLoad() {
loader.classList.add('display');
}
function hideLoad() {
loader.classList.remove('display');
}
async function getWeather() {
if (!input.value.trim()) return;
showLoad();
try {
const response = await fetch(`http://api.weatherapi.com/v1/current.json?key=XXXXXXX&q=${encodeURIComponent(input.value)}&aqi=no`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const res = await response.json();
const celsius = `Temp: ${res.current.temp_c} °C`;
divId.innerHTML = celsius;
} catch (err) {
divId.innerHTML = `Error: ${err.message}`;
} finally {
hideLoad(); // 无论成功或失败都隐藏加载器
}
}
searchButton.addEventListener('click', getWeather);? 关键注意事项：
- ✅ 始终在 finally 块中调用 hideLoad()，避免因网络异常、API 错误等导致加载动画永久挂起；
- ✅ 使用 encodeURIComponent() 对用户输入进行编码，防止特殊字符破坏 URL；
- ✅ 确保 input 元素已正确定义并获取（原代码缺失 input 引用，需补全）；
- ✅ 推荐为 loader 添加 role="status" 和 aria-live="polite" 提升无障碍体验；
- ✅ 若项目使用现代构建工具（如 Vite、Webpack），可进一步封装为可复用的 useLoading() Hook 或自定义指令。
通过修正 CSS 类选择器 + 完善 JS 控制流，即可稳定、可靠地在 fetch 请求周期内显示/隐藏 preloader，显著提升 Web 应用的响应感知与用户体验。
