Что такое хороший способ для отображения небольшого индикатора состояния для пользователя во время выполнения любого запроса ajax?

Question

При использовании phonegap + jquery mobile, как лучше всего отобразить маленький индикатор состояния пользователю во время выполнения любого фонового ajax-запроса?

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

Answer 1

У меня, как правило, есть div с идентификатором msg, он помещается вверху раздела контента, когда я делаю ajax-вызов, я вызываю loading, эта загрузка просто $ ('# msg'). Show ('slow «); и затем, когда все сделано, я затем скрываю, пробовал pageLoading, но все зависит от фреймворка, и я нахожу, что это не всегда работает, плюс вы не можете изменить текст динамически, при наличии идентификатора вы можете изменить html-контент, чтобы сказать «Поиск». .... или загрузка ... и т. д., но все равно получают тот же эффект.

если вы работаете с jquery mobile, я бы порекомендовал вам изменить div data-type = header 'на теги header так же, как для нижнего колонтитула и содержимого и сделайте свой собственный CSS, jquery ужасен в этом и работает очень плохо.

Заголовок

header { position:fixed; left:0; right:0; top:0; height:50px; overflow:hidden; }
<header class='ui-bar-a"></header>

просто если вы захотите повысить производительность, вы будете поражены тем, насколько проще и быстрее становятся вещи, когда вы этого не делаете. пусть jquery запускает код только потому, что у вас есть строка заголовка !!!

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

о, и как коллега по телефону, jquery mobile, если вы используете live («нажмите», измените это, чтобы выявить огромную разницу: -)

Answer 2

Это лучшее решение, которое я мог бы придумать сам:

function begin() {
    $(document).ajaxStart(function() {
        $.mobile.pageLoading();
    });
    $(document).ajaxStop(function() {
        $.mobile.pageLoading(true);
    });  
}
document.addEventListener("deviceready", begin, true);

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