Ожидание загрузки страницы

312

15 декабря 2016, 16:33

Здравствуйте, при открытии страницы выполняется скрипт. Подскажите способы как добавить надпись "пожалуйста подождите" а когда скрипт загрузится показать контент на странице. Вот моя html на что нужно разместить такой скрипт. Какой нибудь простенький. Пример шаблонов таких скриптов найти не смог, может у кого есть.

   <div class="filemanager">
            <div class="search">
                    <input type="search" placeholder="Поиск файлов..." />
            </div>
            <div class="breadcrumbs"></div>
            <ul class="data"></ul>
            <div class="nothingfound">
                    <div class="nofiles"></div>
                    <span>Нет файлов.</span>
            </div>
    </div>

Answer 1

Достаточно закрыть необходимые вам или все элементы на странице прелоадером, который будет исчезать после необходимых действий на странице.

jQuery(document).ready(function($) { 
  $(window).load(function() { 
    setTimeout(function() { 
      $('#preloader').fadeOut('slow', function() {}); 
    }, 2000); 
 
  }); 
});

#preloader { 
  position: fixed; 
  left: 0; 
  top: 0; 
  z-index: 999; 
  width: 100%; 
  height: 100%; 
  overflow: visible; 
  background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="preloader"></div> 
<p>EXEMPLE</p>

Пример на JSFiddle

Answer 2

Вариантов несколько:

С использование jQuery. Код будет выполнен браузером после загрузки всех файлов и рендеринга страницы.
```
$(document).ready(function() {
  тут твой код
});
```
Реально длительный процесс, который исполняется на сервере. В этом случае клиенту отдается html как в примере.
```
 <div class="inprogress">
   Progress indicator
 </div>
```

По мере выполнения процесса на сервере клиенту отдаются кусочки такого кода:

<script type="text/javascript">
меняем значение прогресса
</script>

И в самом конце:

<script type="text/javascript">
 $(".inprogress").hide();
</script>

Суть в том, что коннект между сервером и клиентов не разрывается на время выполнения длительной операции, клиент все "ждет и ждет", а сервер понемногу выдает кусочки Javascript кода, который и отображает значения прогресса.

Конечно, в настройках php.ini max_execution_time должно быть достаточно большим, чтобы длительный процесс успел закончиться.