Отобразить * браузер * индикатор загрузки (например, при обратной передаче) на вызовах ajax - PullRequest
Новая
       24

Отобразить * браузер * индикатор загрузки (например, при обратной передаче) на вызовах ajax

9 голосов
/ 16 февраля 2012

пример: зайдите на свою стену Facebook, прокрутите конец страницы, Facebook загрузит больше постов асинхронно .Или просто нажмите на изображение в вашей записи на стене.Диалог изображений (с комментариями и увеличенным изображением) также загружается асинхронно .(Вы можете увидеть запросы GET с помощью firebug).

Но, взглянув на вкладку Firefox, вы увидите индикатор загрузки, как при обратной передаче.

Я знаю, что этого можно достичь, используя IFrame и изменив его src.Точно так же, как iGoogle .Но я не уверен, что Facebook использует IFrame для загрузки дополнительных сообщений на стене.Есть ли другой способ добиться этого?

Обновление : под словом "индикатор загрузки" я не имел в виду индикатор ajax.
Как я уже упоминал, индикатор браузера (тот, что на левой стороне)вкладки, показывающей нам, загружается ли страница), изменяется на загрузку, как на обратную передачу.

Ответы [ 3 ]

6 голосов
/ 25 мая 2013

Это можно сделать с помощью iframe.Короче говоря, вы добавляете скрытый iframe: 

var $loadingIndicator = $('<iframe src="/loading/" class="visuallyhidden">');
$loadingIndicator.appendTo('body');

Он должен загрузить страницу, которая останавливается, никогда не загружается.Возможно, на собственном домене веб-сайта, поскольку браузер фактически отображает waiting for domainname.com в строке состояния.

В файле domainname.com/loading/index.php вы вводите: 

<?php sleep(100);

И удаляете iframe, когда закончите:

$loadingIndicator.remove();

Это не идеально, учитывая, что это на самом деле дополнительный запрос.Несколько причин:

  • ваш сервер будет иметь длинные запросы, которые могут повлиять на производительность.
  • браузер будет использовать одно из немногих доступных одновременных подключений, что, возможно, замедлит загрузку.
  • в моем случае анимация заикается (Chrome 27 / OSX, requestAnimationFrame).

через техника медленной загрузки
через https://stackoverflow.com/a/3145840/288906

6 голосов
/ 06 марта 2012

Не AFAIK.Я предполагаю, что они, вероятно, установили IFrame src для ajax-метода и при загрузке перемещают содержимое в div (или другой элемент).

3 голосов
/ 27 ноября 2014

Я сделал библиотеку на основе jQuery, чтобы справиться с этим, которая должна быть жизнеспособным решением в некоторых ситуациях (того же происхождения) и успешно запускать индикаторы занятости в некоторых браузерах настольных компьютеров (по крайней мере, в современных Chrome и Firefox, и, как ни странно, также в IE8, но вероятно, не IE9, и определенно не Safari или большинство мобильных браузеров).

Шумный JSON

По сути, я использую подход iframe для запуска индикаторов «занят», но без искусственного нажатия на отдельную «остановленную» страницу: вместо этого он просто использует пользовательский $ .ajaxTransport для прохождения через скрытый iframe и последующего анализа JSON ответ обратно. В результате браузер отображает индикаторы загрузки, которые напрямую связаны с вашим запросом: никаких дополнительных http-запросов. Вы можете просто установить плагин, а затем решить, какие ajax-запросы должны быть шумными, а какие нет, просто изменив параметр dataType.

В качестве дополнительного примечания, тот факт, что загрузка контента в iframes НЕ вызывает какой-либо обратной связи пользовательского интерфейса в Safari и IE9, просто bizarre .

...