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

加载动画需同时满足至少显示5秒且关键资源（如英雄图）加载完成两个条件后才隐藏。利用`window load`事件确保所有资源下载解码，结合`Promise all`与`setTimeout`实现，脚本需置于``底部并给容器加初始CSS隐藏，可避免资源未就绪时暴露空白或布局错位。

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

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

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

需要注意以下要点：

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