loading元素必须放在body开头并用内联样式控制显示，确保浏览器解析时立即渲染；需设position: fixed、z-index: 9999、背景遮罩及flex居中；动画须在head中预定义@keyframes并启用gpu加速；隐藏时机用window.onload加8秒超时兜底；配合body opacity渐显防fouc。
loading元素必须放在开头且用内联样式控制显示
浏览器解析HTML是自上而下流式进行的，如果把#loading写在末尾或依赖外部CSS，它根本来不及渲染——用户看到的就是空白或错位内容闪一下，动画形同虚设。最稳做法是：直接在第一行插入带完整样式的<div id="loading">，所有定位、尺寸、背景、z-index都用内联<code>style写死。
常见错误包括：display: none初始隐藏（动画压根不出现）、没设position: fixed（被页面内容挤跑）、z-index不够高（被导航栏盖住）。
-
position: fixed; top: 0; left: 0; width: 100%; height: 100%是基础定位四件套 -
z-index: 9999确保压在所有内容之上 -
background: #fff或半透明白色遮罩，避免底层未渲染内容“透底” - 用
display: flex; justify-content: center; align-items: center居中比margin: auto更可靠
动画必须用纯CSS实现且预置在里
Safari等浏览器对动态注入的@keyframes支持不稳定，如果把动画定义写在JS执行后或外部CSS里，可能首次加载时动画卡顿甚至不转。正确做法是在里用<style></style>提前声明@keyframes spin，再让#loading里的子元素直接引用。
不要用GIF：多一次HTTP请求、无法调色、缩放失真；也不要用多层嵌套div模拟旋转——性能差、移动端掉帧。
- 推荐方案：
border: 4px solid #eee; border-top-color: #007bff; border-radius: 50%+animation: spin 1s linear infinite - 务必加
will-change: transform或transform: translateZ(0)触发GPU加速 - 动画时长控制在0.8s–1.2s之间，太快显得急促，太慢加重等待感
隐藏时机只能用window.addEventListener('load', ...)
DOMContentLoaded只代表DOM树就绪，图片、字体、外部CSS都还没加载完。很多人的动画“一闪而过”，就是因为用了这个事件——结果loading刚消失，背景图才开始加载，页面突然重排重绘，用户感觉更卡。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
window.onload（即window.addEventListener('load', ...)）才是真正兜底的信号：它等待所有资源（含<img>、<link rel="stylesheet">、@font-face）全部完成才触发。
- JS代码建议放在底部或用
defer属性，避免阻塞HTML解析 - 隐藏逻辑写成：
document.getElementById('loading').style.display = 'none' - 必须配8秒超时兜底：
setTimeout(() => { ... }, 8000)，防止某张图片404导致loading永远不消失
要防FOUC就得配合body opacity渐显
即使loading显示正常，如果外部CSS加载慢，浏览器可能先渲染无样式的HTML，再突然套上样式——loading动画会被“抢镜”，用户根本注意不到。这不是动画问题，而是样式应用时机问题。
解决方案不是给loading加visibility: hidden，而是让整个页面默认不可见，等所有资源就绪后再淡入。
- 在
内联CSS中写：body { opacity: 0; transition: opacity 0.3s ease; }和body.loaded { opacity: 1; } - JS里改用
document.body.classList.add('loaded')，而不是操作display - 千万别用
visibility: hidden替代opacity: 0，否则fixed定位的loading层会因层级失效而不可见
defer的同步<script></script>，或者没内联的关键CSS，会让再漂亮的spinner也沦为摆设。
