如何设置网页Loading Screen的最短显示时长（5-8秒）

Hey there! 👋 很高兴能帮你搞定这个加载屏的小需求。你的核心诉求是让加载屏至少保持显示5-8秒，哪怕页面提前加载完成，对吧？咱们先看看原代码的问题，再一步步修改实现~

原代码的问题 #

原来的逻辑是页面加载完成（document.readyState === "complete"）就立刻隐藏加载屏，完全没考虑「最小显示时长」。如果你的页面加载速度很快，加载屏可能一闪而过，用户根本看不到上面的内容，这就达不到你想要的效果啦。

解决方案：结合时间判断+延迟隐藏 #

我们需要做两件事：

• 记录加载屏开始显示的时间
• 页面加载完成后，计算加载屏已经显示了多久，如果没到最小时长，就延迟剩下的时间再隐藏；如果已经够了，直接隐藏就行。

修改后的完整代码 #

HTML（和你的原代码一致，不用改）

<!--LOADING-->
<div id="loader">
  Loader content
</div>
<!--CONTENT-->
<div class="content">Content</div>

CSS（优化覆盖效果，可选添加过渡）

/*LOADER*/
#loader {
  background-color: #e0e0e0;
  width: 100vw;
  height: 100vh;
  position: fixed; /* 确保加载屏始终覆盖整个视口，不受页面滚动影响 */
  top: 0;
  left: 0;
  transition: opacity 0.3s ease; /* 可选：添加淡出过渡，让隐藏更平滑 */
  opacity: 1;
}

JavaScript（核心修改部分）

// 记录加载屏开始显示的时间戳
let loaderStartTime;

document.onreadystatechange = function() {
  const loader = document.querySelector("#loader");
  const body = document.querySelector("body");

  if (document.readyState !== "complete") {
    body.style.visibility = "hidden";
    loader.style.visibility = "visible";
    // 只在加载屏第一次显示时记录时间，避免重复赋值
    if (!loaderStartTime) {
      loaderStartTime = Date.now();
    }
  } else {
    // 计算加载屏已经显示的时长（毫秒）
    const elapsedTime = Date.now() - loaderStartTime;
    // 这里设置最小显示时长，5000=5秒，改成8000就是8秒，按需调整
    const minDisplayTime = 5000;

    if (elapsedTime < minDisplayTime) {
      // 还没到最小时长，延迟剩下的时间再隐藏
      setTimeout(() => {
        // 用过渡动画淡出（如果加了CSS过渡的话）
        loader.style.opacity = "0";
        setTimeout(() => {
          loader.style.display = "none";
        }, 300); // 和CSS里的transition时长一致
        body.style.visibility = "visible";
      }, minDisplayTime - elapsedTime);
    } else {
      // 已经显示足够久了，直接隐藏
      loader.style.opacity = "0";
      setTimeout(() => {
        loader.style.display = "none";
      }, 300);
      body.style.visibility = "visible";
    }
  }
};

额外优化小建议 #

• 灵活调整时长：把minDisplayTime改成变量后，你可以轻松在5-8秒之间切换，甚至给不同页面设置不同时长。
• 过渡动画提升体验：加个opacity的过渡效果，比直接display: none更丝滑，用户体验更好。
• 避免覆盖交互：如果加载屏隐藏时用了过渡，可以给加载屏加pointer-events: none（比如在隐藏状态的类里），避免过渡期间阻挡页面内容的点击。

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