基于Ajax实现页面加载进度：Pace进度条集成问题咨询

嘿，我懂你现在的处境——刚搞定Ajax导航加载和popstate页面切换，功能都正常，可就是没法让Pace进度条在点击链接时同步显示页面加载进度对吧？别着急，咱们一步步来搞定这个问题：

第一步：确保Pace正确引入与配置 #

首先得确认你已经把Pace的CSS和JS文件正确引入到页面里，并且做一些适配Ajax导航的配置：

<head>
  <meta charset="utf-8" />
  <title>jQuery Ajax Test</title>
  <!-- 引入Pace样式 -->
  <link rel="stylesheet" href="pace.css">
  <!-- 引入Pace脚本 -->
  <script src="pace.js"></script>
  <script>
    // 配置Pace，避免与popstate冲突
    Pace.options = {
      restartOnPushState: false, // 禁用pushState自动重启，我们手动控制
      restartOnBackboneRoute: false,
      minTime: 100, // 保证进度条至少显示一段时间，避免闪一下就消失
      ghostTime: 50
    };
  </script>
</head>

第二步：在点击链接的Ajax请求中手动控制Pace #

修改你原来的链接点击事件，在发起Ajax请求前启动进度条，请求完成/失败时处理进度条状态：

$(document).on('click', 'a[href^="/"]', function(e) {
  e.preventDefault();
  const targetUrl = $(this).attr('href');

  // 重启Pace进度条，开始显示加载状态
  Pace.restart();

  $.ajax({
    url: targetUrl,
    type: 'GET',
    success: function(response) {
      // 替换页面内容（这里对应你的#render-me区域）
      $('#render-me').html($(response).find('#render-me').html());
      // 更新浏览器历史记录
      history.pushState({ url: targetUrl }, '', targetUrl);
      // 请求成功后Pace会自动停止，也可以手动调用Pace.stop()确保
    },
    error: function() {
      // 请求失败时强制停止进度条，并给出提示
      Pace.stop();
      alert('页面加载失败，请稍后重试');
    }
  });
});

第三步：处理popstate事件中的进度条 #

当用户点击浏览器前进/后退按钮时，也要触发Pace进度条，保持体验一致：

$(window).on('popstate', function(e) {
  if (e.originalEvent?.state) {
    const targetUrl = e.originalEvent.state.url;

    // 启动进度条
    Pace.restart();

    $.ajax({
      url: targetUrl,
      type: 'GET',
      success: function(response) {
        $('#render-me').html($(response).find('#render-me').html());
      },
      error: function() {
        Pace.stop();
        alert('页面加载失败，请稍后重试');
      }
    });
  }
});

额外注意事项 #

• 检查Pace文件的路径是否正确，确保服务器能正常返回这些资源
• 如果你的Ajax请求有自定义的头部或者特殊配置，确保Pace能检测到（不过手动调用Pace.restart()和Pace.stop()的方式兼容性更好）
• 可以根据自己的需求调整Pace的样式和配置参数，比如进度条的颜色、位置等

这样调整之后，每次点击链接或者切换历史记录页面时，Pace进度条就会正常显示加载状态啦！

内容的提问来源于stack exchange，提问作者Saheed Olalekan Abdulrasaq