本文介绍一种可靠的前端加载策略：结合 window.load 事件与最小延时（5秒），确保 Lottie 加载动画在关键资源（如首屏 Hero 图片）完成渲染后才消失，避免白屏或内容闪现。
本文介绍一种可靠的前端加载策略：结合 `window.load` 事件与最小延时（5秒），确保 lottie 加载动画在关键资源（如首屏 hero 图片）完成渲染后才消失，避免白屏或内容闪现。
在单页应用（SPA）或静态首页中，仅靠固定 setTimeout 隐藏加载器存在明显缺陷：若页面资源（尤其是大尺寸 Hero 图片、字体、JS/CSS）加载慢于 5 秒，用户会提前看到未就绪的页面；反之，若资源瞬间加载完成，却仍强制等待 5 秒，又会损害用户体验。
理想的方案是 “取二者最大值”：即加载器必须显示满 5 秒，且不得早于页面所有资源（包括图片、样式、脚本）加载完毕。这恰好可通过 window.addEventListener('load', ...) 实现——该事件在 HTML 文档解析完成、且所有依赖资源（含 <img>、<link>、<script> 等）均加载并执行完毕后触发。
以下是推荐实现方式（已适配您的 HTML 结构）：
<!-- 在 <body> 底部添加此脚本 -->
<script type="module">
const root = document.getElementById('root');
const loader = document.getElementById('myDotlottiePlayer');
// 初始隐藏主内容，仅显示加载器
root.style.display = 'none';
// 监听全局 load 事件（确保所有资源加载完成）
window.addEventListener('load', () => {
// 启动计时器：5秒后隐藏加载器、显示主内容
setTimeout(() => {
loader.style.display = 'none';
root.style.display = 'block'; // 或 'flex' / 'grid'，按实际布局调整
}, 5000);
});
</script>⚠️ 关键注意事项：
- load 事件 vs DOMContentLoaded：务必使用 window.load 而非 DOMContentLoaded，后者仅表示 DOM 解析完成，不保证 <img> 等外部资源已加载——而您的 Hero 图像正是关键依赖。
- Lottie Player 加载时机：@dotlottie/player-component 是异步模块，需确保其脚本（dotlottie-player.mjs）已加载完成再操作 DOM 元素。将上述逻辑置于所有 <script> 标签之后（如示例中放在 dotlottie-player.mjs 和 main.tsx 之后），可规避元素未定义错误。
- CSS 布局兼容性：若 #root 使用 flex/grid 布局，请在显示时恢复对应 display 值（如 root.style.display = 'flex'），避免布局错乱。
- 增强健壮性（可选）：对慢网用户，可增加加载超时兜底（如 10 秒强制显示），防止因资源异常失败导致加载器永久停留：
let loaded = false;
window.addEventListener('load', () => {
loaded = true;
});
setTimeout(() => {
if (!loaded) console.warn('Page load timeout — showing content anyway.');
loader.style.display = 'none';
root.style.display = 'block';
}, 10000);综上，该方案以浏览器原生事件为基础，无需额外库，精准满足“至少 5 秒 + 等待资源就绪”的双重约束，兼顾性能与体验。
