最稳方案是将loading元素置于<body>开头并用内联CSS固定定位，因HTML自上而下解析，末尾插入会导致DOM建完才渲染、引发闪屏；须用position:fixed+z-index防遮挡，flex居中更可靠，动画需预置在<head>style中避免Safari闪烁，且load事件需配8秒超时兜底以防资源失败卡死。
页面加载完成前如何显示动画
直接在 <body> 开头插入一个遮罩层（<div id="loading">），用 CSS 控制显示，再用 JavaScript 在 window.addEventListener('load', ...) 里隐藏它。注意：不能只监听 DOMContentLoaded，因为图片、字体、外部 CSS 等资源还没加载完，用户仍可能看到内容“闪入”。
常见错误是把 loading 层写在 </body> 前面但没加 position: fixed 和 z-index，导致它被内容顶开或不可见。
- 遮罩层必须设
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; - 动画建议用纯 CSS（比如
@keyframes spin+border: 4px solid #eee+border-top-color: #007bff实现旋转圆圈），避免额外 JS 依赖 - 务必在
window.addEventListener('load', () => { document.getElementById('loading').style.display = 'none'; })中移除，不是DOMContentLoaded
如何防止 FOUC（无样式闪烁）同时保留加载动画
如果 HTML 模板里引用了外部 CSS 文件，浏览器可能先渲染无样式的 HTML，再突然应用样式——这时 loading 动画可能一闪而过甚至看不见。解决方案是给 <body> 默认加 opacity: 0，等所有资源就绪再渐显。
关键点在于：CSS 加载完成 ≠ 所有资源加载完成，所以不能靠 link.onload 单独判断；必须和 window.load 同步控制。
立即学习“前端免费学习笔记（深入）”；
- 在
<head>内写内联 CSS：body { opacity: 0; transition: opacity 0.3s ease; } body.loaded { opacity: 1; } - JS 中改为添加 class：
document.body.classList.add('loaded')，而不是直接操作display或visibility - 不要用
visibility: hidden替代opacity: 0，否则 loading 层可能被隐藏（因层级关系失效）
移动端 Safari 下 loading 动画卡住不动怎么办
部分 iOS Safari 版本（尤其是 15.x–16.x）对 transform 动画在未触发硬件加速时渲染异常，表现为旋转动画停顿或不转。这不是代码写错，而是浏览器渲染策略问题。
最简修复方式是强制开启 GPU 加速，且确保动画元素有独立合成层。
- 给 loading 元素加 CSS：
transform: translateZ(0); will-change: transform; - 避免用
animation: spin 1s infinite配合transform: rotate()单独写，改用transform: rotate(0deg)→rotate(360deg)的完整 keyframes 定义 - 测试时禁用「减少动画」系统设置（设置 > 辅助功能 > 动态效果 > 减少动态效果），否则所有 CSS 动画会被降级为静态
要不要用第三方库比如 NProgress 或 Pace.js
可以，但多数 HTML 模板场景没必要。NProgress 依赖 jQuery，Pace.js 自动监听资源加载但会误判（比如动态插入的 script 不被追踪）；而手写 20 行 JS + 10 行 CSS 就能稳定覆盖 95% 需求。
真正需要库的情况只有两个：要显示进度百分比、或项目已用 Webpack/Vite 且需 hook 到模块加载流程。
- 纯静态模板？直接手写更轻量、可控、无兼容风险
- 用了构建工具且需精准进度条？优先查构建工具文档（如 Vite 的
import.meta.glob加载时机），而非引入 Pace - 若坚持用 Pace，请删掉默认的
pace-theme-barber-shop，它依赖 Web Font，可能造成二次 FOUC
最易被忽略的一点：很多人把 loading 动画逻辑写在外部 JS 文件里，却没加 defer 或放在 </body> 前——结果 JS 还没解析，window.load 已触发，动画永远不消失。
