必须等load事件才能隐藏loading动画，因其确保所有资源（含图片、CSS、JS、字体）加载完成；否则易出现闪烁或布局跳动。
页面加载完成前显示 loading 动画的关键时机
浏览器解析 HTML 是从上到下流式进行的，DOMContentLoaded 触发时 DOM 已就绪但图片、CSS、JS 可能还没加载完；而 load 事件才代表所有资源（含图片、样式表、脚本）全部加载完毕。要实现“真正意义上的页面加载中动画”，必须等 load，否则可能动画刚消失，背景图或字体还没出来，造成闪烁或布局跳动。
用纯 HTML + CSS 实现最简 loading 动画
不需要 JS 也能起步，但仅限“静态占位”：在 开头插入一个固定定位的 loading 层，再用 window.addEventListener('load', ...) 隐藏它。常见错误是直接用 display: none 写在初始 HTML 里——那动画根本不会出现。
正确做法：
- 在
最上方加： - 在
中加 CSS 动画定义： - 在页面底部或
块中加 JS 隐藏逻辑：
避免 loading 动画被阻塞的两个硬坑
很多人的 loading 动画“一闪而过”甚至不出现，根本原因不是代码写错，而是资源加载顺序和阻塞问题：
立即学习“前端免费学习笔记（深入）”；
千博企业网站管理系统个人版免费下载、免费使用、功能无限制，完全免费拥有(请尊重开发者版权，保留首页底部版权显示)：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。千博企业网站管理系统个人版2012.3.19更新1.修正后台生成静态页面函数；2.增加集成环境以方便用户本地调试、体验。千博企业网站管理系统个人版：免费下载、免费使用、功能无限制。完全免费拥有(请尊重开发者版权，保留
-
标签没加defer或async，且放在里——JS 同步执行会阻塞 HTML 解析，导致 loading 元素还没被创建，页面就卡住了 - CSS 文件体积大、未内联关键样式，浏览器等待 CSSOM 构建完成才开始渲染，此时即使 HTML 有 loading 元素，也可能因无样式而不显示（比如没设
background或z-index） - 字体文件（
@font-face）加载慢，触发 FOIT（Flash of Invisible Text），看起来像“加载卡住”，其实 loading 动画早已隐藏，只是文字没出来
更可靠的 loading 状态管理建议
如果页面依赖 JS 渲染（如 Vue/React 单页应用），纯靠 load 事件不够：资源加载完了，但组件还没 mount，用户仍看到白屏。这时应把 loading 控制权交给框架本身，或用 document.readyState + 自定义加载标记配合。
例如，在入口 JS 执行前就显式控制 loading 层：
注意：document.write 在现代开发中慎用，仅适用于极简静态页；复杂项目建议用 document.createElement + document.body.prepend 替代，确保 DOM 存在后再操作。
loading 动画最容易被忽略的其实是「取消机制」——网络请求失败、用户手动刷新、路由跳转时，loading 层若没及时清理，就会永远挂着。别只想着怎么显示，先想好怎么收尾。
