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

Question

我确实需要在 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 显示进度？我使用 pace 的原因是因为没有配置。如果不可能，请用 ajax/jquery 指导我好吗？

非常感谢。

Answer 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：（归因）

特此免费授予获得本软件和相关文档文件副本（"Software"）的任何人不受限制地处理本软件的权限，包括但不限于以下权利：使用、复制、修改、合并、发布、分发、再许可、and/or 出售软件的副本，并允许获得软件的人这样做，但须满足以下条件：

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

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

How to show pace.js progress of page load in td tag

html

javascript

jquery

pace