如何确保加载动画至少显示5秒，且在页面资源（如英雄图）完全加载后再隐藏-js教程-PHP中文网

如何确保加载动画至少显示5秒，且在页面资源（如英雄图）完全加载后再隐藏

本文介绍一种可靠方案：结合 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> 放在元素之后，确保 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);