Загрузка анимации во время работы PHP l oop - PullRequest
0 голосов
/ 06 апреля 2020

Я хочу добавить анимацию загрузки, пока работает php l oop (для l oop). Допустим, это для l oop с 10 числами. Я хочу, чтобы анимация отображалась как 1 Идет загрузка. Когда начинается число секунд, отображается 2 Идет загрузка только (не как 1, так и 2). Надеюсь, вы можете правильно понять мой вопрос. Можете ли вы помочь мне в этом

 <html>
<head>
<style>
.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}


</style>
<script type="text/javascript">

</script>
</head>
<body>               
<?php
$i=0;
for ($i=0;$i <= 10; $i++)
{
  echo "  <p class='loading'>$i Loading</p>";
}
?>
  </body>
</html>

1 Ответ

0 голосов
/ 06 апреля 2020

То, как вы его настроили, то, что вы хотите, невозможно. Это связано с тем, как работает PHP.

Когда PHP встроен в такой файл HTML, он запускается на сервере перед отправкой страницы пользователю. Временная шкала выглядит следующим образом:

  1. Пользователь запрашивает страницу
  2. Сервер находит файл для этой страницы
  3. Сервер запускает код внутри каждого блока и подставляет в результате для тега php.
  4. Сервер отправляет сгенерированный документ HTML пользователю

Как вы можете видеть, к тому времени, когда пользователь видит что-либо, весь код php уже завершен.

Чтобы получить какое-либо динамическое c поведение на вашей веб-странице (, например, панель загрузки ), вы ДОЛЖНЫ использовать JavaScript (или что-то, что компилируется в JS как TypeScript). Это связано с тем, что код JavaScript отправляется пользователю вместе с HTML и выполняется браузером пользователя после загрузки страницы.

Предположительно, вы хотите показать индикатор выполнения, потому что Вы хотели запустить какой-нибудь код PHP, который займет некоторое время. Вы все еще можете сделать это. Вместо встраивания PHP в HTML, вы можете создать автономный файл PHP, который выполняет желаемую задачу, а затем на вашей странице JavaScript отправить второй запрос на этот сервер и получить результат, пока показывая свой прогресс. Google вы хотите использовать следующие термины: «PHP REST server» (для сервера) и «JavaScript XHR» или «JavaScript fetch» ​​для отправки запросов от клиента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...