如何确保加载动画至少显示5秒且等待关键资源如英雄图加载完成后再隐藏

时间：2026-07-02 12:05:56 编辑：袖梨来源：一聚教程网

本文介绍一种可靠方案：结合 window.addEventListener('load') 与 setTimeout，确保 Lottie 加载动画至少显示5秒，并在页面所有资源（含 hero 图像）加载完毕后才隐藏，避免白屏或内容闪现。

本文介绍一种可靠方案：结合 `window.addeventlistener('load')` 与 `settimeout`，确保 lottie 加载动画至少显示5秒，并在页面所有资源（含 hero 图像）加载完毕后才隐藏，避免白屏或内容闪现。

在单页应用（SPA）或静态首页中，仅靠固定延时（如 setTimeout(..., 5000)）隐藏加载器存在明显缺陷：若页面资源（尤其是大尺寸 hero 图像）加载耗时超过5秒，动画会提前消失，导致用户看到未渲染完成的空白或错位布局；反之，若资源极快加载，又可能让加载器停留过久，影响体验。

理想的解决方案是 “满足两个条件之一即触发隐藏”：
✅ 页面完全加载（window.load 事件，涵盖 HTML、CSS、JS、图片、字体等所有关键资源）
✅ 且最小展示时间 ≥ 5 秒

以下为推荐实现方式（兼容现代浏览器，无需额外依赖）：

<!-- 在 <body> 底部添加此脚本 --><script type="module">  const root = document.getElementById('root');  const loader = document.getElementById('myDotlottiePlayer');  // 初始状态：隐藏主内容，显示加载器  root.style.display = 'none';  // 监听页面完全加载事件  window.addEventListener('load', () => {    // 启动计时器：确保加载器至少显示5秒    setTimeout(() => {      loader.style.display = 'none';      root.style.display = 'block'; // 或 'flex' / 'grid'，按实际布局调整    }, 5000);  });</script>

⚠️ 注意事项：

window.load 会等待 <img> 标签中的 src 图片完全下载并解码，因此 hero 图像自然被纳入判断条件，符合“加载一半再显示”的业务诉求（实际是等图像加载完成，更稳妥）；
若需更精细控制（如仅等待特定图片），可改用 img.onload 或 IntersectionObserver + decode()，但 load 事件已覆盖绝大多数场景；
确保 <script type="module"> 在 <dotlottie-player> 元素之后执行，否则 getElementById 可能返回 null；
建议为 #root 设置初始 CSS 隐藏（如 <div id="root" style="display:none;">），避免 JS 未执行前内容短暂闪现；
Lottie Player 组件需在脚本执行前已注册（你已通过 <script src=".../dotlottie-player.mjs"> 正确引入，无需额外处理）。

最终效果：用户始终看到流畅的加载动画，既不会因网络慢而暴露未就绪界面，也不会因资源快而无谓等待——兼顾性能感知与用户体验一致性。

推荐专题

最新下载

热门教程

如何确保加载动画至少显示5秒且等待关键资源如英雄图加载完成后再隐藏

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程