Как заставить AJAX запускать индикатор загрузки браузера

Я делаю программу планирования лаборатории с поддержкой ajax, и некоторые из операций ajax не совсем бывают быстрыми.

В Gmail, когда вы переходите к своему почтовому ящику, отправляете сообщение и т.д. браузер действует так, как будто он загружается (в FF кнопка останова включается, появляется индикатор выполнения), но она не на новой странице, она сделана через AJAX.

Как они это делают? У меня есть небольшой индикатор, но было бы неплохо, чтобы браузер работал так, как будто он загружается. Любые идеи?

Ответ 1

Я думаю, этот - ваш ответ. (Технология Reverse-AJAX или "медленная загрузка" от Obviously.com)

Похож на метод GMail и Facebook (в браузере отображается страница как "загрузка" с иконками загрузки и т.д. - это просто симуляция, потому что есть фоновый запрос ajax):)

Ответ 2

Я нашел ответ на этот вопрос здесь: Браузер продолжает загрузку после завершения запроса ajax.

Вы можете создать iframe и открыть и закрыть его contentDocument, который, кажется, запускает и останавливает загрузку с загрузкой на родной загрузке. См. Пример здесь: http://jsfiddle.net/KSXkS/1/.

Ответ 3

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

Если весь пользовательский интерфейс становится недействительным во время запроса, наложение с индикатором загрузки является подходящим. Немного непрозрачный накладной обменивается с пользователем без разрушительного разрыва в видении.

Если вам просто нужно показать, что запрос запущен и работает, лучше всего использовать прядильщик рядом с кнопкой, которая начала запрос. При успехе счетчик может быть заменен зеленой галочкой или другим общим индикатором, который исчезает через короткий период.

Это обычные шаблоны, найденные во многих приложениях google.

Ответ 4

В этой статье содержатся сведения о различных типах запросов и отображаются ли они индикаторами занятости, такими как индикатор выполнения.

Ответ 5

Я считаю, что вам нужно что-то подобное.

Я добавил API, чтобы вытащить геолокацию github.com (не относящийся, но я думаю, что он служит цели образца API).

Простой JavaScript и JQuery код для отображения/скрытия индикатора загрузки при выполнении запроса AJAX.

$('#btn').click(function() {
  $('#overlay').show();
  $.ajax('https://freegeoip.net/json/github.com').then(function(response) {
    $('#overlay').hide();
    $('#country').html(response.country_name);
  });
});

body {
  padding: 0;
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.plus {
  display: flex;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
  <div class="plus">
    <img src="https://loading.io/assets/img/landing/curved-bars.svg" alt="loading"/>
  </div>
</div>

<div>
  <button id="btn">Perform AJAX Operation</button>
  <div>
  Country: <span id="country"></span>
  </div>
</div>

Ответ 6

Вероятным решением является использование iframe для запуска загрузки. Но, основываясь на предыдущем ответе, метод iframe не может работать на хроме.

Ваша потребность в том, чтобы показать значок загрузки в браузере, поэтому я думаю, что другим способом является создание fake loading icon.

Вы можете вручную обновить значок браузера. Есть несколько руководств по обновлению значка браузера.

И затем попробуйте сделать анимированный значок. Большинство браузеров не поддерживают значок gif, поэтому вам нужно будет обновить значок за каждые несколько секунд.

Это демонстрационный код:

 var favicon_images = [];
 for (var i = 1; i <= 12; i++)
   favicon_images.push('./icon/' + i + '.png');

 var image_counter = 0;

 setInterval(function() {
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = favicon_images[image_counter];
     document.getElementsByTagName('head')[0].appendChild(link);

   if(image_counter == favicon_images.length -1)
         image_counter = 0;
     else
         image_counter++;
 }, 150);

Я создаю быструю демонстрацию. Демо

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

Итак, преобразуйте образ в формат base64, чем он работает плавно.

демо-версия Base64

Теперь вам просто нужно найти значок загрузки одинаковым с Chrome и другими популярными браузерами, а затем вызвать fake loading при вызове ajax.

Здесь я вставляю несколько руководств по значку изменения: