Как заставить 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.
Здесь я вставляю несколько руководств по значку изменения: