本文介绍一种可靠方案：结合 window.addEventListener('load') 与 setTimeout，确保 Lottie 加载动画最少展示5秒，并严格等待 DOM、CSS、JS 及所有关键资源（含 hero 图像）加载完毕后才切换至主内容。
本文介绍一种可靠方案：结合 `window.addeventlistener('load')` 与 `settimeout`，确保 lottie 加载动画最少展示5秒，并严格等待 dom、css、js 及所有关键资源（含 hero 图像）加载完毕后才切换至主内容。
在单页应用（SPA）或静态首页中，仅靠固定 setTimeout(5000) 隐藏加载器存在明显缺陷：若页面资源（尤其是大尺寸 hero 图像）尚未加载完成，用户可能提前看到空白或错位布局；而若仅监听 DOMContentLoaded，又无法保证图片等外部资源已就绪。正确做法是以 window.load 事件为触发基准——该事件在 HTML 文档、所有样式表、脚本、图片及其他依赖资源全部加载完成后才会触发，天然满足“hero 图像加载一半/完全加载”的业务需求。
以下是完整、可直接集成的实现方案：
✅ 推荐实现（安全、简洁、兼容性好）
<!-- 在 <body> 底部，<script> 标签前 -->
<div id="root" style="display: none;">/* 你的应用根节点内容 */</div>
<div id="loader" style="
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 9999;
">
<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>
<!-- 引入 Lottie Player（建议放在 loader 后，确保元素已存在） -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<script type="module">
// 等待整个页面（含图片、字体、iframe等）加载完成
window.addEventListener('load', () => {
const loader = document.getElementById('loader');
const root = document.getElementById('root');
// 确保最少显示 5 秒：取 max(5000ms, 实际加载耗时)
const minShowDuration = 5000;
const loadStartTime = performance.now();
setTimeout(() => {
// 隐藏 loader，显示主内容
loader.style.display = 'none';
root.style.display = 'block'; // 或 'flex' / 'grid'，按需调整
}, minShowDuration);
});
</script>? 关键说明与注意事项
为什么用
load而非DOMContentLoaded？DOMContentLoaded仅表示 HTML 解析完成，不等待图片、样式表等外部资源；而load事件明确等待所有子资源加载完毕，完美匹配“hero 图像加载完成”的要求。避免竞态问题：将
<script type="module"></script>放在<dotlottie-player></dotlottie-player>元素之后，确保 DOM 已挂载，防止getElementById返回null。-
视觉平滑过渡（进阶建议）：可添加 CSS fade-out 动画提升体验：
#loader { transition: opacity 0.3s ease; } /* 隐藏时 */ setTimeout(() => { loader.style.opacity = '0'; setTimeout(() => { loader.style.display = 'none'; }, 300); root.style.display = 'block'; }, 5000); -
首屏 hero 图优化提示：若 hero 图仍显慢，建议同时启用
<img loading="eager" alt="如何确保加载动画至少显示5秒，且在页面资源（如英雄图）完全加载后再隐藏" >、WebP 格式、CDN 加速及预加载：<link rel="preload" href="/images/hero.webp" as="image" type="image/webp">
此方案兼顾可靠性与用户体验：既守住「至少 5 秒」的底线，又绝不牺牲资源加载完整性，是生产环境推荐的标准实践。
