直接在index.html的开头写死loading层，内联CSS并用MutationObserver监听游戏容器插入后隐藏，避免白屏与WebGL上下文失效。
HTML5 打包后怎么加 loading 页
直接在 index.html 的 开头插入一个轻量级 loading 层，配合 JS 控制显隐即可。不需要构建工具插件或服务端介入，纯前端可落地。
关键点在于：loading 页必须在首屏 HTML 解析时就存在，且不能阻塞后续资源加载；真实内容（如 Canvas、WebGL 场景、JS bundle）加载完成后再隐藏它。
- 不要用
document.write()或动态appendChild延迟到 DOMContentLoaded，那样用户会看到白屏再闪出 loading - 不要把 loading 逻辑写在异步加载的 JS 文件里（比如
main.js），它可能比资源还晚执行 - 推荐把 loading HTML 写死在
index.html里，CSS 内联，JS 初始化代码尽量短小并放在底部或顶部
如何让 loading 页不遮挡真实内容初始化
常见错误是 loading 层用 display: none 或 visibility: hidden 隐藏后，再等 window.onload 才移除 —— 这会导致 Canvas 黑屏、音频上下文被挂起、甚至 WebGL 上下文创建失败（尤其在 iOS Safari 上）。
正确做法是：用 JS 主动监听核心资源就绪信号，而非依赖全局加载事件。
立即学习“前端免费学习笔记（深入）”；
- 如果是 Three.js 项目，监听
renderer.domElement插入 document 后再 hide loading - 如果是 PixiJS，等
app.view被 append 到 body 后操作 - 如果用了 Webpack/Vite 构建，可在入口 JS 最开头加
document.getElementById('loading').style.display = 'none'，但需确保该 JS 是或内联在底部 - 更稳妥的是用
MutationObserver监听body子节点变化，一检测到游戏主容器（如）就隐藏 loadingloading 页 CSS 必须避开的兼容性坑
移动端 H5 尤其要注意 viewport 缩放、fixed 定位失效、字体抗锯齿缺失等问题。以下 CSS 设置不是“可选”，而是上线前必验：
-
html, body { height: 100%; margin: 0; overflow: hidden; }—— 防 iOS 滚动穿透和底部留白 - loading 容器用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不用100%（Safari 对 % 高度解析不稳定） - 动画用
transform: scale()或opacity，避免触发布局重排；禁用animation-timing-function: cubic-bezier(0,0,0,0)（部分 Android WebView 会卡死） - 文字用系统默认字体栈，如
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;，别用自定义 webfont —— 它会延迟 loading 消失
最小可用 loading 页 HTML 示例
这个版本仅 1.2KB，无外部依赖，适配微信、QQ、iOS Safari、Android Chrome 等主流环境：
My Game 注意
main.js里不要再调用document.getElementById('loading')—— 它可能已被移除或隐藏。所有业务逻辑应假设 loading 已退出。 -
