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

本文详解如何在使用 javascript fetch api 获取数据时，确保加载指示器（如旋转动画）能及时、可靠地显示与隐藏，重点解决因 css 选择器作用域错误导致的 preloader 不可见问题。

在基于 Fetch 的异步请求中，为提升用户体验，通常需在请求发起后立即显示加载动画（preloader），并在响应完成或出错后将其隐藏。但许多开发者会遇到“明明调用了 showLoad()，页面却看不到 loader”的情况——这往往并非逻辑错误，而是 CSS 样式优先级或选择器匹配失效所致。

在你提供的代码中，关键问题在于 CSS 类名绑定与样式定义不一致：

#load {
  display: none; /* 初始隐藏 */
}

#load.display {
  display: block;
}

而 JavaScript 中通过 loader.classList.add(‘display’) 添加的是类名 display，但该类仅在元素同时具有 id=”load” 且 拥有 class=”display” 时才生效。看似合理，实则存在隐患：若后续 HTML 结构微调（如 id 变更）、或 CSS 预处理器/框架引入更高优先级规则，#load.display 就可能被覆盖或失效。

✅ 正确做法是解耦 ID 与状态类，将显示控制权完全交由类名本身：