在Compose新页面导航时显示进度条的实现方案

核心思路 #

页面间切换的加载反馈，关键是在新页面完全渲染完成前先展示过渡层或进度条，等页面资源、接口都加载完毕后再隐藏反馈元素。

1. 普通多页应用方案 #

• 跳转触发时：监听页面内的链接点击事件，或利用beforeunload事件，在当前页面立即弹出全屏加载遮罩+进度条。
• 新页面加载时：在<head>最顶部插入基础加载样式和进度条DOM，让浏览器优先渲染这个反馈，等页面主体加载完成后移除。
  示例代码：

  <!-- 新页面<head>顶部插入 -->
  <style>
    #page-loading-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: #2196F3;
      z-index: 99999;
      animation: loading-progress 1.5s ease-in-out infinite;
    }
    @keyframes loading-progress {
      0% { width: 0%; }
      50% { width: 70%; }
      100% { width: 100%; }
    }
    .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.9);
      z-index: 99998;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
  <div id="page-loading-bar"></div>
  <div class="loading-overlay">
    <p>加载中，请稍候...</p>
  </div>
  <script>
    window.addEventListener('load', () => {
      // 加短延迟避免页面闪屏
      setTimeout(() => {
        document.getElementById('page-loading-bar').remove();
        document.querySelector('.loading-overlay').remove();
      }, 200);
    });
  </script>
  

2. 单页应用(SPA)场景方案 #

如果是Vue/React这类SPA，页面切换是前端路由跳转：

• 用路由守卫监听切换动作，在跳转开始时显示全局进度条组件。
• 配合接口请求拦截器，实时更新进度条百分比（比如开始请求时进度到30%，所有请求完成后拉满到100%）。
  Vue示例片段：

  // 全局路由守卫
  router.beforeEach((to, from, next) => {
    // 可替换为自定义进度条组件的启动方法
    NProgress.start();
    next();
  });
  
  router.afterEach(() => {
    NProgress.done();
  });
  
  // 接口拦截器同步进度
  axios.interceptors.request.use(config => {
    NProgress.inc(0.2);
    return config;
  });
  

3. 无JS降级方案 #

要兼容无JS环境，可在<body>最顶部插入静态加载反馈，用CSS动画实现，页面加载完成后通过类名切换隐藏：

.loading-feedback {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.loaded .loading-feedback {
  display: none;
}

在页面底部添加：

<script>
  document.body.classList.add('loaded');
</script>

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