Отображение колеса прогресса при загрузке страницы - PullRequest
Новая
       0

Отображение колеса прогресса при загрузке страницы

6 голосов
/ 25 марта 2011

Мне нужно, чтобы отображалось колесо прогресса, пока выполняется много запросов к базе данных и сторонним cURL, пока пользователь ждет.

Должно ли колесо прогресса показываться само по себе сразу или показывать его после загрузки шаблона страницы (но не содержимого)?

Должен ли я показывать колесо прогресса до тех пор, пока HTML / javascript страницы не загрузится или PHP не загрузится?

Если бы вы могли показать в необработанном коде, как это делает большинство людей, это было бы замечательно. Я использую jQuery, и это сайт PHP.

Ответы [ 2 ]

3 голосов
/ 25 марта 2011

показывать индикатор выполнения до тех пор, пока ответ php (возвращаемое значение может быть HTML) не загружен в javascript.

«Должен ли я показывать колесо прогресса до HTML / javascript страницы готов загрузка, или когда PHP завершен загрузка? "

Да, к этому подходу

После завершения загрузки скрыть загрузку с помощью jquery и поместить содержимое в класс контейнера. 

<div class="loading">
</div>
<div id="container">
</div>



$('.loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
2 голосов
/ 25 марта 2011

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

Вы можете видеть здесь, я создал загрузочную графику, добавил в jQuery и привязал асинхронное событие к произвольному клику. Графическое изображение отображается перед установлением соединения, а затем скрывается по завершении запроса. Вы используете завершение в случае ошибки ответа. 

<head> <style> .slider { display: none; }</style> </head>
<body>
  <div class="slider"><img src="someslidergraphic.gif"></div>

  <script src="http://code.jquery.com/jquery.js"></script>
  <script>
    jQuery(function($) {
      // The animation slider cached for readability/performance          
      var slider = $(".slider");

      // Arbitrary event    
      $("body").bind('click', function() {
        // Show graphic before ajax
        slider.show();

        // Fetch content from PHP
        $.ajax({
          // Setings
          ...
          'complete': function() {
            // Hide during complete
            slider.hide();

            // Rest of code after request
            ...
          }
        });
    });
  </script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...