直接在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 是<script defer></script>或内联在底部 - 更稳妥的是用
MutationObserver监听body子节点变化，一检测到游戏主容器（如<div id="game">）就隐藏 loading<h3>loading 页 CSS 必须避开的兼容性坑</h3> <p>移动端 H5 尤其要注意 viewport 缩放、fixed 定位失效、字体抗锯齿缺失等问题。以下 CSS 设置不是“可选”，而是上线前必验：</p> <ul> <li> <code>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 等主流环境：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>My Game</title>
<style>
#loading {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.3s;
}
.spinner {
width: 40px; height: 40px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loading"><div class="spinner"></div></div>
<p><!-- 你的游戏容器，例如： -->
<div id="game"></div></p><p><!-- 入口 JS 必须在 body 内且靠前 -->
<script>
// 确保在任何资源加载前执行
function hideLoading() {
const el = document.getElementById('loading');
if (el) el.style.opacity = '0';
setTimeout(() => { el.style.display = 'none'; }, 300);
}
// 等待 game 容器出现（比 window.onload 更早）
if (document.getElementById('game')) {
hideLoading();
} else {
const mo = new MutationObserver(() => {
if (document.getElementById('game')) {
mo.disconnect();
hideLoading();
}
});
mo.observe(document.body, { childList: true, subtree: true });
}
</script></p><p><!-- 其他脚本，如 main.js、vendor.js -->
<script src="main.js"></script>
</body>
</html>注意 main.js 里不要再调用 document.getElementById('loading') —— 它可能已被移除或隐藏。所有业务逻辑应假设 loading 已退出。
