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

Question

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

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

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

Answer 1

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

Answer 2

Думаю, this - ваш ответ. (Метод Reverse-AJAX или «Медленная нагрузка» от Obviously.com)

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

Answer 3

Я нашел связанный ответ здесь: Browser continues 'loading' after ajax request finishes.

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

Answer 4

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

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

Answer 5

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

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

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

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

Answer 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); 

Я быстро создать демо. Demo

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

Поэтому преобразуйте изображение в формат base64, чем оно работает плавно.

Base64 demo

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

---

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

• https://gist.github.com/mathiasbynens/428626
• How to animate a favicon?