显示反应中的负载百分比

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加载脚本文件，然后将加载的代码注入DOM。但是，由于脚本位于CDN的不同域中，所以跨站点保护会引起问题。或者您的CDN允许专门从您的域（或任何域）中加载内容，否则您将无法这样做。

另一种方法是延迟从CDN加载脚本，然后在dom内逐个接收脚本，并监听窗口加载（onload）事件。您不会直接获得百分比，但是可以估计每个文件中的百分比并执行平滑的动画处理。但这会对您的加载时间产生负面影响，因为通常一次加载一个脚本文件要比一次全部加载慢（或者更确切地说，让浏览器管理脚本加载过程）。

加载栏通常用于加载大量资源的笨拙页面上。