在反应中显示加载百分比

Question

您好，我在 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 开发人员工具上禁用缓存并重新加载来检查它。

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

Answer 1

获得准确负载百分比的唯一方法是使用 XHR (AJAX)，但这对您的情况是不可能的。方法是用 AJAX 加载脚本文件，然后将加载的代码 inyect 到 DOM。使用 XHR，您可以使用此处描述的内容：Can onprogress functionality be added to jQuery.ajax() by using xhrFields? However because the scripts are in a CDN, a different domain, you will have problems caused by the CORS / cross-site protections. Or your CDN allows to load contents specifically from your domain (or any domain) or you cannot do in that way. See more in Understanding CORS

另一种更不准确的方法是估计已加载文件与待加载文件的总百分比（但不知道每个文件的加载百分比是多少。您延迟从 CDN 加载脚本，启动您自己的 "load management" 脚本，然后在 dom 中一个接一个地插入标签（使用 or in Loading scripts after page load? 中描述的内容），等待 window 加载（onload）事件。

通过这种方式您将了解加载过程的进展情况，但是很粗略，因此您可以使用该信息绘制带有进度条的平滑动画。

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

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

在反应中显示加载百分比

Show loading percentage in react

javascript

preloader

reactjs