Показать загрузку во время ожидания сервера - PullRequest
Новая
       6

Показать загрузку во время ожидания сервера

0 голосов
/ 17 января 2019

Я хочу изменить сценарий js, который будет запускаться, когда клиент ждет сервера, а не запускается при загрузке.Там вы можете увидеть скрипт: FakeLoader.js , CSS Я нашел решение ajax здесь , но я понятия не имел, как его использовать, как скриптинициализируется в HTML.Я думаю, что ключ находится в конце js-файла: 

$(window).load(function(){
            centerLoader();
          $(window).resize(function(){
            centerLoader();
          });
    });

На html-странице у меня есть поле ввода текста, которое обновляет при нажатии Enter, поэтому я подумал, что могу решить его, заменивупомянутая часть с кодом из здесь : 

$(document).keypress(function (e) {
    if (e.which == 13) {
                centerLoader();
              $(window).resize(function(){
                centerLoader();
              });
    }
});

Это должно запустить загрузчик, когда нажал enter, и показать его, пока сервер отправляет новую страницу, а вместо этого просто выполняетТо же самое до изменения скрипта, что странно.Вот как это инициализируется в html: 

<div id="fakeLoader"></div>

<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>

Не могли бы вы дать некоторую идею?Я не очень хорош в JS.Спасибо.

1 Ответ

0 голосов
/ 17 января 2019

У меня есть рабочий образец с этим: 

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js"></script>
    <link rel="stylesheet" href="http://joaopereirawd.github.io/fakeLoader.js/demo/css/fakeLoader.css" />

    <script>
    window.onload = () => {
      document.body.addEventListener('keydown', function (e) { 
       if (e.keyCode == 13) {
       $("#fakeLoader").fadeIn();
         $("#fakeLoader").fakeLoader({
           timeToHide:1200, //Time in milliseconds for fakeLoader disappear
           spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
          });
        }
     });
    }
    </script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id="fakeLoader"></div>

<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
  </body>

</html>

Очевидно, что вы не хотите, чтобы конечный результат выглядел. Будет лучше перенести часть фальшивого загрузчика в функцию и сделать кеширование кода кросс-браузерным. Это поможет вам начать.

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

Похожие темы

...