Показать процент загрузки в реакции - PullRequest
Новая
       47

Показать процент загрузки в реакции

3 голосов
/ 13 января 2020

Привет, я реализовал загрузчик в реакции, как показано ниже. 

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 инструментах разработчика и перезагрузив.

Я хочу показать процент загрузки файлов сценариев. Как это можно реализовать?

1 Ответ

1 голос
/ 13 января 2020

Единственный способ получить точный процент загрузки - использовать XHR (AJAX), но это невозможно для вашего случая. Метод заключается в загрузке файлов сценариев с AJAX и последующей вставке загруженного кода в DOM. Используя XHR, вы можете использовать что-то похожее на описанное здесь: Можно ли добавить функцию * onprogress в jQuery. ajax () с помощью xhrFields? Однако, поскольку скрипты находятся в CDN, другом домене, вы будут проблемы, вызванные CORS / межсайтовой защитой. Или ваш CDN позволяет загружать контент конкретно из вашего домена (или любого домена), или вы не можете делать это таким образом. Подробнее см. В Понимание CORS

Другой, более неточный способ - оценить общий процент загруженных файлов по сравнению с ожидающими загрузки файлами (но не зная, какой процент каждого файла загружен. Вы задерживаете загрузка сценария из CDN, запустите собственный сценарий «управления загрузкой», а затем вставьте теги dom в один из тегов (используя что-то вроде описанного в Append Tag to Body? или в Загрузка сценариев после загрузки страницы? ), ожидание событий загрузки (onload) окна.

Таким образом, вы узнаете, как идет процесс загрузки, но довольно точно, поэтому с этой информацией вы Можно нарисовать сглаженную анимацию с помощью индикатора выполнения.

Но будьте осторожны: это, вероятно, отрицательно скажется на времени загрузки, поскольку загрузка файлов сценария один за другим обычно медленнее, чем загрузка всего за один раз (так что браузер может управлять процесс загрузки скрипта, обычно паралеллизирующий загрузки).

Шкалы загрузки обычно используются на страницах с большими значениями, которые ich загружать много ресурсов, которые обычно находятся в том же домене или, по крайней мере, в доменах, которыми вы владеете, так что вы можете успешно настроить CORS, чтобы разрешить XHR (AJAX) загружать процессы из одного или разных доменов. Подробнее см. Здесь Как работает заголовок Access-Control-Allow-Origin? однако это не относится к вашему делу, если вы не можете изменять серверы CDN. Если серверы разрешают CORS, вам повезло, а если нет, вы, вероятно, ничего не можете сделать.

...