Как отобразить сообщение о загрузке до начала вызова ajax?

Question

$('#wait').ajaxStart(function (){
$(this).css('background-position','0 -90px');
});
var result = $.ajax({
url: "file.php",
async: false,
data: ({id:id}),
type: "post",
cache: false
}).responseText;

У div #wait есть фон с иконками ok, error и wait, и я хочу изменить положение фона div ДО звездочек вызова ajax, но это не работает.Я пытался предупредить что-то из функции ajaxStart, и это сработало, поэтому я не знаю, по какой причине ajax не ждет изменения положения фона ...

Answer 1

Поскольку ваш ajax-запрос является синхронным, а javascript - однопоточным, он блокирует другие действия.Я не уверен, почему ваш конкретный случай не работает, так как я ожидаю, что метод css будет завершен немедленно, но я ожидаю, что это связано со спецификой того, когда браузер фактически отображает обновления DOM, которые могут неЭто происходит до тех пор, пока поток не будет завершен.

В целом, однако, вы можете полностью избежать этой проблемы, используя асинхронные запросы.Блокировка запросов AJAX также может создавать негативные последствия для пользователя, поскольку пользовательский интерфейс полностью отключен во время его работы.Из-за этого почти всегда предпочтительнее использовать асинхронный запрос.Если вам нужно убедиться, что элементы страницы отключены (например, эффективно имитировать синхронный запрос), существует множество плагинов jquery, чтобы сделать это легко.Мне повезло с blockui: http://jquery.malsup.com/block/

Answer 2

У меня такая же проблема с jQuery mobile, когда я пытаюсь отобразить $ .mobile.loading перед отправкой данных, и в моем случае он должен синхронизироваться.Некоторые данные должны быть загружены раньше других, поэтому, если все они были асинхронными, они могут отправить некоторые записи обновления до того, как произойдет вставка.Мое решение состояло в том, чтобы установить setTimeout вокруг вызова ajax, чтобы я дал время загрузки, чтобы появиться до запуска ajax.Хороший способ сделать это, но пока мне не перезвонят в $ .mobile.loading, я застрял, используя его.

Answer 3

Пробовали ли вы использовать функцию beforeSend(jqXHR, settings) для фона ожидания, error(jqXHR, textStatus, errorThrown) для ошибок и функцию success(data, textStatus, jqXHR) в случае успешного выполнения запроса?

http://api.jquery.com/jQuery.ajax/

Answer 4

beforeSend (jqXHR, настройки) Функция

Функция обратного вызова перед запросом, которую можно использовать для изменения объекта jqXHR (в jQuery 1.4.x, XMLHTTPRequest) перед его отправкой,Используйте это для установки пользовательских заголовков и т. Д. Карты jqXHR и настройки передаются в качестве аргументов.Это Ajax Event.Возврат false в функции beforeSend отменит запрос.Начиная с jQuery 1.5, опция beforeSend будет вызываться независимо от типа запроса.