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

本文详解如何在使用 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 统一收尾，即可实现流畅、可靠、专业的加载体验。