如何让加载动画至少显示5秒并等待关键资源加载后隐藏

在页面加载场景里，加载动画的显示时机一直是让人头疼的问题。只靠固定延时（比如 setTimeout(5000)）显然不靠谱：万一 Hero 图这类大资源加载超过 5 秒，动画提前消失，用户就看到空白或布局错位；如果资源加载飞快，动画又可能傻傻地转圈，白白浪费好感。

理想解法：等待页面就绪且动画至少展示 5 秒

等页面真正 ready 了，同时保证动画至少展示 5 秒，两个条件都满足才收工。下面这个方案几乎不需要额外依赖，兼容现代浏览器，直接在 底部放一段脚本就行：

关键注意事项

• window.load 事件会等待所有资源（包括 引入，不用额外操心）。

这样最终的效果就是：用户始终看到流畅的加载动画，既不会因为网络慢而提前暴露未就绪界面，也不会因为资源快而白白等待——性能和体验感都拿捏住了。