如何实现HTML页面自动显示指定时长后跳转至另一页面（假加载屏）

核心思路 #

通过HTML构建加载屏结构，CSS实现全屏遮罩效果，再用JavaScript的setTimeout控制延迟时长，到点后隐藏加载屏并自动跳转目标页面。

1. HTML结构 #

先写加载屏容器，再放页面主内容（初始隐藏）：

<!-- 假加载屏幕 -->
<div id="fake-loader">
  <div class="loader-content">
    <p>加载中...</p>
    <!-- 可添加CSS动画加载图标 -->
    <div class="loader-spinner"></div>
  </div>
</div>

<!-- 页面主内容（初始隐藏） -->
<div id="main-content" style="display: none;">
  <h1>当前页面内容</h1>
  <p>几秒后将自动跳转...</p>
</div>

2. CSS样式 #

让加载屏全屏覆盖，内容居中，给加载图标添加旋转动画：

/* 全屏加载屏 */
#fake-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保加载屏在最上层 */
}

/* 加载内容样式 */
.loader-content p {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

/* 旋转加载图标 */
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. JavaScript逻辑 #

设置延迟时长（示例为3秒），到点后隐藏加载屏、显示主内容，再跳转目标页面：

// 延迟时长（单位：毫秒，3000=3秒）
const delayTime = 3000;
// 目标跳转页面URL
const targetUrl = "your-target-page.html";

window.onload = function() {
  setTimeout(() => {
    // 隐藏加载屏
    document.getElementById("fake-loader").style.display = "none";
    // 显示主内容
    document.getElementById("main-content").style.display = "block";
    // 主内容显示1秒后跳转，可自行调整时长
    setTimeout(() => {
      window.location.href = targetUrl;
    }, 1000);
  }, delayTime);
};

可选：纯自动跳转（无加载屏交互） #

如果不需要加载屏的动态切换，仅需基础自动跳转，可在HTML头部添加meta标签：

<!-- 3秒后自动跳转，content为延迟毫秒数，url为目标页面 -->
<meta http-equiv="refresh" content="3; url=your-target-page.html">

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