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。使用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，那么您很幸运，否则，您可能无能为力。

显示反应中的负载百分比

1 个答案: