在反应中显示加载百分比答案

【问题标题】：Show loading percentage in react在反应中显示加载百分比
【发布时间】：2020-04-30 00:40:10
【问题描述】：

您好，我在 react 中实现了一个加载器，如下所示。

ReactDOM.render(
  "loaded",
  document.getElementById("root")
);

body,
#root {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #36364b;
  height: -webkit-fill-available;
}

<div id="root">
  <img src="https://samherbert.net/svg-loaders/svg-loaders/ball-triangle.svg" class="loader" alt="loader">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这确实在加载时显示加载。可以通过禁用 chrome 开发者工具上的缓存并重新加载来检查它。

我想显示为脚本文件加载的百分比。如何实现？

【问题讨论】：

没有干净的方法可以做到这一点。但是您可以查看这些 SO 答案stackoverflow.com/questions/1958624/…
你要达到的cdn加载百分比？？？？？？
@warmachine 是的。
stackoverflow.com/questions/18981909/…，检查一下
@warmachine 是的，这些答案都有点老套，并没有显示实际的加载百分比。我会坚持我现在得到的。感谢您的建议。

标签： javascript reactjs preloader

【解决方案1】：

获得准确负载百分比的唯一方法是使用 XHR (AJAX)，但这不适用于您的情况。该方法是使用 AJAX 加载脚本文件，然后将加载的代码注入 DOM。使用 XHR，您可以使用此处描述的内容：Can onprogress functionality be added to jQuery.ajax() by using xhrFields? 但是，由于脚本位于 CDN 中，即不同的域，您将遇到由 CORS / 跨站点保护引起的问题。或者您的 CDN 允许专门从您的域（或任何域）加载内容，或者您不能这样做。在Understanding CORS中查看更多信息

另一种更不精确的方法是估计已加载文件与待加载文件的总百分比（但不知道每个文件的加载百分比。您延迟从 CDN 加载脚本，开始您自己的“加载管理”脚本，然后在 dom 中逐一插入标签（使用Append <Script> Tag to Body? 或Loading scripts after page load? 中描述的内容），等待窗口加载（onload）事件。

通过这种方式，您将知道加载过程是如何进行的，但是很简单，因此您可以使用该信息绘制带有进度条的平滑动画。

但请注意：这可能会对您的加载时间产生负面影响，因为逐个加载脚本文件通常比一次加载所有文件要慢（因此浏览器可以管理脚本加载过程，通常是并行加载）。

加载栏通常用于加载大量资源的重型页面，这些资源通常位于同一域或至少您拥有的域上，因此您可以成功设置 CORS 以让 XHR (AJAX) 从相同或不同域加载进程.在此处查看更多信息 How does Access-Control-Allow-Origin header work? 但是，只要您不能修改 CDN 服务器，这不适用于您的情况。如果服务器允许 CORS，你很幸运，如果没有，你可能什么都做不了。

【讨论】：