如何让加载动画至少显示5秒并等待英雄图加载完成

在页面加载场景中，加载动画的显示时机始终是影响用户体验的关键痛点。单纯依赖固定延时（例如 setTimeout(5000)）往往难以奏效：如果英雄图（Hero 图）等大型资源加载耗时超过5秒，动画过早消失会导致用户看到空白区域或布局错位；反之，若资源加载速度极快，动画却仍转圈浪费用户时间，同样会降低好感度。

理想的解决思路其实非常直接——等待页面真正就绪，同时确保动画至少展示5秒，两个条件均满足后才关闭动画。

以下方案几乎无需额外依赖，兼容现代浏览器，只需将脚本放置在 底部即可：

需要注意以下要点：

• window.load 事件会等待所有资源（包括 中的 src 图片）下载并解码完成，英雄图自然被纳入判定条件，比“加载一半就显示”更可靠。
• 如果需要对特定图片进行更精细控制，可改用 img.onload 或 IntersectionObserver + decode()，但 load 事件已覆盖绝大多数业务场景。
• 脚本必须放置在 元素之后，否则 getElementById 可能无法获取元素。
• 建议为 #root 预先添加 CSS 隐藏（例如

  ），以防 JavaScript 尚未执行时主内容闪现。

• 确保 Lottie Player 组件在脚本之前已注册（您已通过