本文介绍一种可靠方案：通过监听 window.load 事件结合最小延时机制，确保 lottie 加载动画至少展示5秒，且不早于页面所有关键资源（含 hero 图片）加载完成后再隐藏，避免白屏或内容闪现。
本文介绍一种可靠方案：通过监听 window.load 事件结合最小延时机制，确保 lottie 加载动画至少展示5秒，且不早于页面所有关键资源（含 hero 图片）加载完成后再隐藏，避免白屏或内容闪现。
在单页应用（SPA）或静态首页中，仅靠 setTimeout 隐藏加载器存在明显缺陷：若页面资源（尤其是大尺寸 hero 图片）加载耗时超过5秒，加载器会提前消失，导致用户看到未渲染完成的空白或错位内容；反之，若资源极快加载，又可能因硬编码延时造成不必要的等待。理想的解决方案需同时满足两个条件：
✅ 至少显示5秒；
✅ 且必须等到所有关键资源（HTML、CSS、JS、图片等）加载完毕后才触发隐藏逻辑。
核心实现依赖 window.addEventListener('load') —— 该事件在整个页面及其所有依赖资源（包括 <img>、样式表、脚本、iframe 等）全部加载并解析完成后才触发，天然适配“hero 图片加载完成”的需求。
以下是完整、可直接集成的代码方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page with Guaranteed Loader</title>
<!-- Lottie Player 脚本（CDN） -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
<!-- 主要内容容器（初始隐藏） -->
<div id="root" style="display: none;">Your App Content Here</div>
<!-- 全屏加载动画 -->
<div id="loader" style="
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
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 底部或使用 type="module"） -->
<script type="module">
const root = document.getElementById('root');
const loader = document.getElementById('loader');
const player = document.getElementById('myDotlottiePlayer');
// 关键：监听 window load，确保所有资源（含 hero 图）加载完成
window.addEventListener('load', () => {
// 启动最小5秒计时器（即使 load 很快触发，也强制等待）
setTimeout(() => {
// 平滑隐藏加载器，显示主内容
loader.style.opacity = '0';
loader.style.pointerEvents = 'none';
// 确保 DOM 更新后切换显示状态（避免闪烁）
setTimeout(() => {
loader.style.display = 'none';
root.style.display = 'block'; // 或根据实际框架调整（如 React 的 hydrate）
}, 300);
}, 5000);
});
</script>
<!-- 注意：dotlottie-player 组件必须在脚本执行前加载 -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
</body>
</html>? 关键注意事项与最佳实践：
- window.load vs DOMContentLoaded：务必使用 load 而非 DOMContentLoaded，后者仅等待 HTML 解析完成，不保证图片、样式等外部资源加载完毕，无法满足 hero 图加载需求。
- Lottie 组件加载顺序：@dotlottie/player-component 必须在控制脚本执行之后加载（如示例中置于最后），否则 getElementById('myDotlottiePlayer') 可能返回 null。
- 用户体验优化：添加 CSS transition 实现淡出效果，并禁用 pointer-events 防止加载期间误操作；setTimeout 嵌套确保视觉过渡自然。
- 扩展建议：如需更精细控制（例如仅等待特定图片），可改用 img.onload + Promise.all() 监听关键资源，再统一触发计时逻辑。
此方案兼顾可靠性与兼容性，无需额外构建工具或框架支持，适用于任何基于 HTML 的前端项目。
