详解HTML页面加载状态指示器的实现（用户体验）-html教程-PHP中文网

document.readystate 的三个状态值分别代表：'loading'（文档正在解析）、'interactive'（dom 构建完成但外部资源可能未加载完，等效于 domcontentloaded）、'complete'（所有资源加载完毕，等效于 load 事件）；它比 domcontentloaded 更底层，适合依赖图片尺寸、字体渲染等完整资源就绪的场景。

详解html页面加载状态指示器的实现（用户体验）

怎么用 `document.readyState` 判断页面是否真正就绪

很多人以为 DOMContentLoaded 触发就代表页面“能用了”，其实不然——它只说明 DOM 树构建完成，但图片、字体、样式表可能还在加载中。document.readyState 才是更底层的状态开关，有三个关键值：loading、interactive、complete。

真正适合执行初始化逻辑的时机是 complete，尤其当你的 JS 依赖渲染后的图片尺寸、Web Font 渲染结果或第三方脚本（如 analytics）时：

interactive 时 DOM 可操作，但 window.onload 尚未触发，img 元素的 naturalWidth 可能仍为 0
complete 意味着所有资源（包括 async 脚本、defer 脚本、img、link rel="stylesheet"）均已加载完毕
不要只监听一次 readystatechange：状态可能从 loading → interactive → complete 跳变，需检查当前值而非仅靠事件触发

推荐写法：

function waitForComplete() {
  if (document.readyState === 'complete') {
    initApp();
  } else {
    document.addEventListener('readystatechange', () => {
      if (document.readyState === 'complete') initApp();
    });
  }
}

为什么直接操作 `display` 比用 `opacity` 更可靠

用 opacity: 0 + transition 做 loading 遮罩，看似平滑，但容易在低端设备或高负载下卡顿，甚至出现“半透明遮罩下还能点按钮”的穿透问题。

真正稳的方案是切换 display 或 visibility，并配合 pointer-events: none：

display: none 完全脱离渲染流，不占布局空间，也不响应任何事件
visibility: hidden 保留占位，适合需要维持布局稳定的场景（比如防止按钮跳动）
必须加 pointer-events: none 到 loading 容器上，否则 iOS Safari 和部分安卓 WebView 仍会拦截点击事件
避免在 loading 元素里放 input 或 button，它们可能被键盘唤起或焦点捕获，导致不可见却可交互

fetch / axios 请求中 loading 状态怎么不出错

全局拦截器听着省事，实际踩坑最多：AbortError 不触发 response，网络中断没 error 抛出，Promise 被 catch 吞掉后 loading 就永远挂着。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

安全做法是每个请求都手动控制生命周期：

发起前：设 loading 状态为 true，并同步更新 UI（如按钮禁用 + 添加 disabled 属性）
无论成功、失败、取消，都必须走 .finally() 关闭 loading —— 这是唯一能覆盖所有退出路径的钩子
不要依赖 .then().catch() 双分支，因为 fetch 的 4xx/5xx 不进 catch，得手动检查 response.ok
axios 封装时，config 里传 showLoading: true 可以，但拦截器里不能只靠 response 和 error，必须加 request 拦截器开 loading + finally 关

示例关键片段：

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') return;
    throw err;
  })
  .finally(() => hideLoading());

SPA 路由跳转时 loading 怎么覆盖完整空白期

只监听数据请求的 loading，会漏掉两个关键空白：组件挂载耗时（尤其是带大量计算的 Vue/React 组件）、代码分割 chunk 加载延迟（import() 动态导入）。

真实链路必须分层处理：

路由触发瞬间（如 router.push() 或 useNavigate() 调用后）立即显示 loading —— 此时还没发请求，但用户已感知到导航意图
动态 import 完成后、组件 mounted 或 useEffect 执行前，是第二个 loading 黄金窗口；可用 defineAsyncComponent（Vue）或 Suspense（React）兜底
服务端渲染（SSR）场景下，首屏 loading 必须在 HTML 返回前就生效，不能等 JS 加载完再控制 —— 这就是为什么最简方案要把 loading 元素写死在开头
移动端要防“loading 闪一下就消失”：加最小显示时长（如 300ms），避免快速跳转造成视觉抖动

最容易被忽略的一点：loading 状态必须和用户操作强绑定。比如点击按钮跳转，loading 应该从按钮按下开始，而不是从 URL 改变开始 —— 否则手指离屏瞬间就结束，用户根本没感知到反馈。