如何让Loader至少显示5秒，或直至页面资源（含Hero Image）加载完成？

需求明确 #

需要让Loader同时满足两个条件后才隐藏：

• 至少在页面上显示满5秒
• Hero Image已加载过半（或页面关键资源完成渲染）

当前代码仅设置了5秒超时隐藏逻辑，未考虑图片加载状态，以下是完整解决方案：

修改后的代码 #

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<div id="root">
  <!-- 此处放置你的Hero Image，添加id用于监听加载状态 -->
  <img id="heroImage" src="你的Hero Image地址" alt="Hero Image" />
</div>
<div id="loaderContainer" style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        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>

<script type="module">
  const loaderContainer = document.getElementById('loaderContainer');
  const heroImage = document.getElementById('heroImage');

  // 封装5秒等待的Promise
  const wait5Seconds = new Promise(resolve => {
    setTimeout(resolve, 5000);
  });

  // 封装Hero Image加载过半的Promise
  const waitHeroImageLoadedPartially = new Promise(resolve => {
    // 若图片已缓存完成，直接触发完成逻辑
    if (heroImage.complete && heroImage.naturalWidth > 0) {
      resolve();
      return;
    }

    // 监听图片加载进度，过半时触发完成
    heroImage.addEventListener('progress', (e) => {
      if (e.loaded / e.total >= 0.5) {
        resolve();
      }
    });

    // 兜底逻辑：图片加载完成/失败时都触发完成，避免Loader一直显示
    heroImage.addEventListener('load', resolve);
    heroImage.addEventListener('error', resolve);
  });

  // 等待两个条件都满足后，隐藏Loader容器
  Promise.all([wait5Seconds, waitHeroImageLoadedPartially]).then(() => {
    loaderContainer.style.display = 'none';
  });
</script>

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

关键调整说明 #

• 给Loader容器添加固定定位和高层级z-index，确保完全覆盖页面，防止用户提前看到未加载完成的内容
• 用Promise.all()同时监听「5秒时长」和「图片加载过半」两个条件，只有两者都达成才隐藏Loader
• 针对图片加载添加了进度监听+兜底逻辑，避免因缓存或加载异常导致Loader无法隐藏
• 改为隐藏整个Loader容器，逻辑更统一清晰

内容的提问来源于stack exchange，提问作者Damilola Adegbemile