加载动画至少显示5秒且不早于页面加载完成的方法

本文将详解一套稳定可靠的实现方案：通过结合 window.load 事件与最小持续时长机制，确保 Lottie 加载动画不会过早隐去（维护视觉体验完整性），同时避免无休止等待（防止用户感知卡顿），尤其适用于含有慢加载英雄图的单页应用场景。

先讲几句真实经验。在现代前端开发实践中，仅靠一个 setTimeout 来隐藏加载器，这种做法往往暗藏风险。试想：当页面中的 hero 图片、字体、关键 CSS/JS 等资源还未完全就绪，但那个 5 秒的计时器却率先触发，用户看到的很可能是一个渲染未完成的“半成品”界面——这样的用户体验显然不尽人意。

反之，如果完全依赖资源加载事件而忽略最小展示时间，动画可能转瞬即逝，用户还来不及看清画面便已结束。这种过渡不仅未能起到缓冲作用，反而显得生硬突兀。

真正成熟的解决思路应当以 window.addEventListener('load', ...) 作为触发基石。该事件会确保所有 HTML、CSS、JS、图片、字体等关键资源均已加载并解析完成。在此基础之上，再叠加一段不低于 5 秒的强制展示期。

以下代码实现便是遵循这一思路，可直接嵌入你的 HTML 结构中：

这一方案具备多个显著优势：

• window.load 的严格程度远超 DOMContentLoaded：它会等待图片、样式表、子资源全部就绪，天然解决了“hero 图加载未完成”的痛点。
• setTimeout 的执行发生在 load 事件触发之后，因此“5 秒”是从资源加载完成那一刻开始计算的，而非从页面启动倒计时。从而彻底避免“加载尚未结束，动画已先退场”的尴尬情形。
• 整个方案无需手动监听单个 的 onload 事件，省去了复杂的 DOM 遍历与事件绑定操作。

当然，实际应用中有几个细节值得关注：

• 务必确保