本文介绍一种兼顾“最小展示时长”与“资源加载完成”的双条件加载器控制策略，通过监听 window.load 事件结合 setTimeout，确保 Lottie 加载动画至少停留5秒，同时不早于页面所有资源（含 hero 图像）加载完毕后才退出。
本文介绍一种兼顾“最小展示时长”与“资源加载完成”的双条件加载器控制策略，通过监听 `window.load` 事件结合 `settimeout`，确保 lottie 加载动画至少停留5秒，同时不早于页面所有资源（含 hero 图像）加载完毕后才退出。
在构建现代单页应用（SPA）或静态首页时，首屏 Hero 图像等关键资源常因体积较大而延迟渲染，若过早移除加载动画，用户会看到空白或布局跳动，影响体验。单纯设置固定延时（如 setTimeout(..., 5000)）存在风险：若页面5秒内未加载完，动画已消失；而仅依赖 load 事件又可能导致动画一闪而过（如资源极快加载）。理想方案是 “取二者最大值” —— 即动画必须显示满5秒，且不得早于页面完全加载完成之后。
实现的关键在于：
✅ 将主内容容器（如 <div id="root">）初始设为 <code>display: none；
✅ 使用 window.addEventListener('load', ...) 监听整个页面资源加载完成事件（包括 <img alt="如何确保加载动画至少显示5秒，且在页面资源（如首屏大图）完全就绪后再隐藏" >、CSS、JS、字体、Lottie JSON 等）；
✅ 在该事件回调中启动一个5秒定时器，仅当定时器到期后才隐藏加载器并显示内容。
以下是优化后的完整 HTML + JavaScript 实现（已适配您的 Lottie Player 结构）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tensfer</title>
<!-- Lottie Player 脚本（需在 body 前或 body 中尽早引入） -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- 主应用容器：初始隐藏 -->
<div id="root" style="display: none;">Your app content goes here</div>
<!-- 全屏加载器 -->
<div id="loader" style="
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
z-index: 9999;
transition: opacity 0.3s ease;
">
<dotlottie-player
id="myDotlottiePlayer"
src="https://lottie.host/2e951bf0-ee8b-42ec-aa93-681a557e55c9/6zwzi5ZAks.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
autoplay
></dotlottie-player>
</div>
<!-- 加载器控制逻辑（置于 body 底部或模块脚本中） -->
<script type="module">
const root = document.getElementById('root');
const loader = document.getElementById('loader');
// 关键：监听 window.load —— 确保所有资源（含 hero img）加载完毕
window.addEventListener('load', () => {
// 启动 5 秒倒计时，保证最小展示时长
setTimeout(() => {
// 隐藏加载器，显示主内容
loader.style.display = 'none';
root.style.display = 'block'; // 或 'flex' / 'grid'，按需调整
}, 5000);
});
</script>
<!-- 注意：Lottie Player 组件必须在 load 事件前加载完成 -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
</body>
</html>? 重要注意事项：
-
window.load事件会等待所有资源（包括<img alt="如何确保加载动画至少显示5秒，且在页面资源（如首屏大图）完全就绪后再隐藏" >标签的src、外部 CSS/JS、字体、iframe 等）加载完成，天然满足“hero 图像加载完成”的需求； - 不要使用
DOMContentLoaded，它仅表示 DOM 解析完成，不保证图片等资源已加载； - 若您使用 React/Vue 等框架，建议将此逻辑封装为入口级加载守卫（如 React 的
Suspense+ 自定义useLoaderHook），而非直接操作 DOM； - 为提升用户体验，可为加载器添加淡出过渡（如示例中的
transition: opacity 0.3s），并在setTimeout内先loader.style.opacity = '0'，再setTimeout(..., 300)后display: none； - 生产环境建议对 Lottie JSON 进行预加载或缓存优化，避免其成为
load事件瓶颈。
通过该方案，您既能严格保障加载动画不少于5秒的视觉停留，又能智能适配网络状况——慢网下自动延长，快网下也绝不早于资源就绪，真正实现「用户无感、体验一致」的加载流程。
