Как заставить AJAX вызывать индикатор загрузки браузера - PullRequest
Новая
       15

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

33 голосов
/ 17 декабря 2009

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

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

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

Ответы [ 6 ]

8 голосов
/ 30 июня 2010

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

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

5 голосов
/ 11 августа 2011

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

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

4 голосов
/ 28 ноября 2017

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

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

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

Это общие шаблоны, которые можно найти во многих приложениях Google.

2 голосов
/ 17 декабря 2009

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

0 голосов
/ 29 ноября 2017

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

Вам нужно показать значок загрузки в браузере, поэтому я думаю, что другой способ - создать 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.

<Ч />

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

0 голосов
/ 22 ноября 2017

Я верю, что вы хотите что-то подобное.

Я добавил 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>
...