如何在td标签中显示页面加载的pace.js进度答案

【问题标题】：How to show pace.js progress of page load in td tag如何在td标签中显示页面加载的pace.js进度
【发布时间】：2017-04-18 23:36:51
【问题描述】：

我确实需要在td 标签中显示pace.js 页面加载进度，而不是显示在网页中间。

我的 HTML：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"/> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/green/pace-theme-center-circle.min.css">
</head>
<body>
<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
<th>Action</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
  <select >
    <option value="0">Select</option>
    <option value="1">Green</option>
    <option value="2">Red</option>
    <option value="3">Amber</option>
  </select>
</td>
<td> <!--show progress bar here></td>
</tr>
</table>
</body>
</html>

是否可以在第三个td 单元格中使用pace.js 显示进度？我使用速度的原因是因为 nil 配置。如果不可能，请您指导我使用 ajax/jquery 吗？

非常感谢。

【问题讨论】：

标签： javascript jquery html pace

【解决方案1】：

您可以这样做，但这需要一些工作。您需要修改pace.js 源文件，这意味着您需要托管或提供您自己的（修改后的）副本。

您需要在Bar.prototype.getElement 方法中进行更改；请参阅下面的修改后的函数以获取示例。您可以完全复制该代码，也可以根据需要对其进行修改。

这些更改基本上将targetElement 变量重定向到您的td 单元格，并将进度指示器设置为使用相对定位，以便显示在单元格内。

Bar.prototype.getElement = function() {
  var targetElement = document.getElementsByTagName('td')[2];
  if (this.el == null) {
    targetElement = document.querySelector(options.target);
    if (!targetElement) {
      throw new NoTargetError;
    }
    this.el = document.createElement('div');
    this.el.className = "pace pace-active";
    document.body.className = document.body.className.replace(/pace-done/g, '');
    document.body.className += ' pace-running';
    this.el.innerHTML = '<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>';
    targetElement = document.getElementsByTagName('td')[2];
    if (targetElement.firstChild != null) {
      this.el.style.position = "relative";
      targetElement.insertBefore(this.el, targetElement.firstChild);
    } else {
      this.el.style.position = "relative";
      targetElement.appendChild(this.el);
    }
  }
  return this.el;
};

我无法在此处提供一个工作示例，因为整个 pace.js 文件太大，但如果您将标准 Bar.prototype.getElement 替换为上述文件，它会将进度指示器插入到该 td 单元格中。

Pace.js License：（包括归属地）

特此免费授予任何人获得本软件和相关文档文件（“软件”）的副本，以不受限制地处理本软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售本软件的副本，并允许向其提供本软件的人这样做，但须符合以下条件：

本软件按“原样”提供，不提供任何形式的明示或暗示保证，包括但不限于对适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任承担任何责任，无论是在合同诉讼、侵权行为或其他方面，由本软件或本软件的使用或其他交易引起或与之相关。软件。

【讨论】：

非常感谢，你太棒了。它真的很好用。没想到会这样。我可以看到td 标记中的进度条不舒服。任何减少进度条大小的建议，我实际上是在单个网页上的许多 td 块中调用它，所以希望它尽可能小。再次感谢您的帮助... :)
@harshavmb 乐于助人。您应该能够通过 CSS 调整进度指示器的大小。尝试定位 pace-progress 或 pace-progress-inner 类。或者，您可以在 td 元素本身上设置最大尺寸，并确保进度指示器填充该空间但不会溢出（导致滚动条）。
如果您不担心看到进度指示器的边缘，可以尝试在 CSS 底部添加 td { overflow: hidden; }。
（另外，您可能还想将 Pace.JS 中的许可文本添加到您的小提琴中，因为您正在使用那里的代码。）
很酷的添加td { overflow: hidden; } 并更改一些参数确实有效。我非常感谢您今天的帮助。感谢您对许可事项的建议。