本文介绍一种可靠方案：结合 window.load 事件与最小延时机制，确保 Lottie 加载动画既不会过早消失（保障视觉完整性），也不会无限等待（避免用户卡顿），特别适用于含慢加载英雄图的单页应用。
本文介绍一种可靠方案：结合 `window.load` 事件与最小延时机制，确保 lottie 加载动画既不会过早消失（保障视觉完整性），也不会无限等待（避免用户卡顿），特别适用于含慢加载英雄图的单页应用。
在现代前端开发中，仅靠固定 setTimeout 隐藏加载器存在明显缺陷——若页面资源（如 hero 图片、字体、关键 CSS/JS）尚未加载完毕，而 5 秒计时已到，用户可能看到未渲染完成的“半成品”页面。反之，若依赖纯资源加载事件但忽略最小展示时长，动画可能一闪而过，削弱用户体验。
正确做法是：以 window.addEventListener('load', ...) 为触发基点，该事件确保所有 HTML、CSS、JS、图片、字体等关键资源均已加载并解析完毕；再在此基础上叠加不少于 5 秒的强制展示期。
以下是优化后的完整实现（适配您的 HTML 结构）：
<!-- 在 <body> 底部添加此脚本块 -->
<script type="module">
// 1. 初始隐藏主内容，仅显示加载器
const root = document.getElementById('root');
const loader = document.getElementById('myDotlottiePlayer');
if (root) root.style.display = 'none';
if (loader) loader.style.display = 'flex'; // 确保 loader 可见
// 2. 监听全局 load 事件（涵盖所有资源）
window.addEventListener('load', () => {
// 3. 启动最小 5 秒计时 —— 即使页面瞬间加载完成，也至少停留 5 秒
setTimeout(() => {
if (loader) loader.style.display = 'none';
if (root) root.style.display = 'block'; // 或 'flex' / 'grid'，按实际布局调整
}, 5000);
});
</script>✅ 关键优势说明：
- window.load 比 DOMContentLoaded 更严格：它等待图片、样式表、子资源全部就绪，天然适配“hero 图加载完成”的需求；
- setTimeout 在 load 触发后执行，确保「5 秒」是从资源加载完成起算，而非页面开始加载时——杜绝“加载未完、动画已退”的风险；
- 无需手动监听单个 <img> 的 onload，避免 DOM 查询与事件绑定复杂度。
⚠️ 注意事项：
- 确保 <script type="module"> 块位于 @dotlottie/player-component 脚本之后（您当前 HTML 中已满足）；
- 若使用 React/Vue 等框架，#root 渲染由框架接管，请勿在 load 事件中直接操作 root.innerHTML，应通过框架生命周期（如 React 的 useEffect + document.readyState === 'complete'）协调；
- 对于超大 hero 图，可进一步增强体验：添加 img[loading="eager"] + fetchpriority="high" 属性，并配合 <link rel="preload"> 提前获取关键资源。
最终效果：用户始终看到流畅的 Lottie 动画，直到整个页面（含 hero 图）真正就绪，且动画展示时间 ≥5 秒——兼顾性能感知与视觉可靠性。
