本文介绍一种可靠方案：结合 window.addEventListener('load') 与 setTimeout，确保 Lottie 加载动画至少显示5秒，并在页面所有资源（含 hero 图像）加载完毕后才隐藏，避免白屏或内容闪现。
本文介绍一种可靠方案：结合 `window.addeventlistener('load')` 与 `settimeout`，确保 lottie 加载动画至少显示5秒，并在页面所有资源（含 hero 图像）加载完毕后才隐藏，避免白屏或内容闪现。
在单页应用（SPA）或静态首页中，仅靠固定延时（如 setTimeout(..., 5000)）隐藏加载器存在明显缺陷：若页面资源（尤其是大尺寸 hero 图像）加载耗时超过5秒，动画会提前消失，导致用户看到未渲染完成的空白或错位布局；反之，若资源极快加载，又可能让加载器停留过久，影响体验。
理想的解决方案是 “满足两个条件之一即触发隐藏”：
✅ 页面完全加载（window.load 事件，涵盖 HTML、CSS、JS、图片、字体等所有关键资源）
✅ 且最小展示时间 ≥ 5 秒
以下为推荐实现方式（兼容现代浏览器，无需额外依赖）：
<!-- 在 <body> 底部添加此脚本 -->
<script type="module">
const root = document.getElementById('root');
const loader = document.getElementById('myDotlottiePlayer');
// 初始状态：隐藏主内容，显示加载器
root.style.display = 'none';
// 监听页面完全加载事件
window.addEventListener('load', () => {
// 启动计时器：确保加载器至少显示5秒
setTimeout(() => {
loader.style.display = 'none';
root.style.display = 'block'; // 或 'flex' / 'grid'，按实际布局调整
}, 5000);
});
</script>
⚠️ 注意事项：
- window.load 会等待
标签中的 src 图片完全下载并解码，因此 hero 图像自然被纳入判断条件，符合“加载一半再显示”的业务诉求（实际是等图像加载完成，更稳妥）；
- 若需更精细控制（如仅等待特定图片），可改用 img.onload 或 IntersectionObserver + decode()，但 load 事件已覆盖绝大多数场景；
- 确保 <script type="module"> 在 <dotlottie-player> 元素之后执行，否则 getElementById 可能返回 null； </script>
- 建议为 #root 设置初始 CSS 隐藏（如
