本文介绍一种兼顾“最小展示时长”与“资源加载完成”的双条件加载器控制策略，通过监听 window.load 事件结合 setTimeout，确保 Lottie 加载动画至少停留5秒，同时不早于页面所有资源（含 hero 图像）加载完毕后才退出。

本文介绍一种兼顾“最小展示时长”与“资源加载完成”的双条件加载器控制策略，通过监听 `window.load` 事件结合 `settimeout`，确保 lottie 加载动画至少停留5秒，同时不早于页面所有资源（含 hero 图像）加载完毕后才退出。

在构建现代单页应用（SPA）或静态首页时，首屏 Hero 图像等关键资源常因体积较大而延迟渲染，若过早移除加载动画，用户会看到空白或布局跳动，影响体验。单纯设置固定延时（如 setTimeout(..., 5000)）存在风险：若页面5秒内未加载完，动画已消失；而仅依赖 load 事件又可能导致动画一闪而过（如资源极快加载）。理想方案是 “取二者最大值” —— 即动画必须显示满5秒，且不得早于页面完全加载完成之后。

实现的关键在于：
✅ 将主内容容器（如

）初始设为 display: none；
✅ 使用 window.addEventListener('load', ...) 监听整个页面资源加载完成事件（包括 、CSS、JS、字体、Lottie JSON 等）；
✅ 在该事件回调中启动一个5秒定时器，仅当定时器到期后才隐藏加载器并显示内容。

以下是优化后的完整 HTML + JavaScript 实现（已适配您的 Lottie Player 结构）：

window.load