本文介绍一种兼顾最小展示时长与资源加载状态的加载器控制策略：使用 window.addEventListener('load') 确保所有关键资源（含图片、脚本、样式表）加载完成，并结合 setTimeout 强制最少5秒显示，避免因快速加载导致 loader 闪退。
本文介绍一种兼顾最小展示时长与资源加载状态的加载器控制策略：使用 `window.addeventlistener('load')` 确保所有关键资源（含图片、脚本、样式表）加载完成，并结合 `settimeout` 强制最少5秒显示，避免因快速加载导致 loader 闪退。
在单页应用（SPA）首屏优化中，仅靠固定延时（如 setTimeout(..., 5000)）容易造成两种体验缺陷：
- 若页面加载极快（如本地调试），loader 一闪而过，用户感知不到过渡；
- 若关键资源（如 hero 图片）加载缓慢，但
load事件已触发（例如因图片未设loading="eager"或 CDN 缓存缺失），则 loader 过早消失，导致白屏或内容闪烁。
因此，推荐采用「加载完成 + 最小延时」双条件兜底方案：监听 window.load 事件（保障 DOM、CSS、JS、图片等全部资源就绪），再启动一个 5 秒倒计时；倒计时结束时统一隐藏 loader 并显示主内容。
以下是完整实现代码（适配你的 HTML 结构）：
<!-- 在 <body> 底部，<script> 标签前插入 -->
<script type="module">
// 隐藏主内容区域（#root），初始仅显示 loader
const root = document.getElementById('root');
const loader = document.getElementById('myDotlottiePlayer');
if (root) root.style.display = 'none';
if (loader) loader.style.display = 'flex'; // 确保 loader 可见（避免 CSS 冲突）
// 监听全局加载完成事件
window.addEventListener('load', () => {
// 启动 5 秒延时（保证最小展示时长）
setTimeout(() => {
if (loader) loader.style.display = 'none';
if (root) root.style.display = 'block'; // 或 'flex' / 'grid'，按实际布局调整
}, 5000);
});
</script>
✅ 关键注意事项：
-
window.load会等待所有子资源（包括、<script></script>）加载完毕，天然适配 hero 图片等慢资源； - 不要将该逻辑放在
DOMContentLoaded中——它不等待图片加载，可能导致 hero 图未出现就隐藏 loader； - 确保
#root和#myDotlottiePlayer元素在执行脚本时已存在于 DOM 中（将 script 放在 body 底部或使用defer）； - 若需更精细控制（如监听特定图片加载），可额外使用
img.onload或IntersectionObserver，但对多数场景load事件已足够可靠。
通过此方案，你的 Lottie 加载动画将严格满足：至少显示 5 秒，且绝不早于页面完全就绪之前消失，兼顾性能感知与视觉一致性。
