Любой пользовательский интерфейс, даже самый примитивный, сегодня не обходится без ajax запросов. Хорошо когда запросы проходят практически мгновенно, благодаря большой скорости соединения пользователя или по другим причинам, но что делать когда запрос длится очень долго? Нужно как-то сообщить пользователю, что все хорошо, скрипт не повис, отправка данных идет, “полет нормальный”. Для этого обычно отображают индикатор загрузки.
Используя JQuery.ajax очень легко отобразить и убрать индикатор загрузки когда это необходимо. Для этого существуют 2 события beforeSend и complete, на которые легко повесить соответствующее отображение индикатора. Ниже я создаю div по событию beforeSend (запрос начался) и уничтожаю его по событию complete (запрос завершен).
div.ds-loading {
background-image: url("/images/admin/loader.gif");
background-repeat: no-repeat;
position: fixed;
width: 126px;
height: 22px;
z-index: 11111;
}
$.ajax({
url: '/admin/photos/delete',
data: "photo_id=" + photo_id,
success: function(){
},
beforeSend: function(){
//создаем div
var loading = $("<div>", {
"class" : "ds-loading"
});
//выравним div по центру страницы
$(loading).css("top", ($(window).height()/2)-($(loading).height()/2)).css("left", ($(document).width()/2)-($(loading).width()/2));
//добавляем созданный div в конец документа
$("body").append(loading);
},
complete: function() {
//уничтожаем div
$(".ds-loading").detach();
}
});
Но что делать, если таких запросов очень много? Вешать на каждый ajax запрос обработчики событий? Благодаря тому, что в JQuery 1.5 добавили дополнительные методы для работы с ajax, стало возможным, легко и непринужденно отобразить индикатор для всех JQuery ajax запросов выполняющийся на сайте, с помощью метода $.ajaxSetup. Просто добавляем следующий код перед началом первого ajax-запроса.
$.ajaxSetup({
beforeSend: function(){
//создаем div
var loading = $("<div>", {
"class" : "ds-loading"
});
//выравним div по центру страницы
$(loading).css("top", ($(window).height()/2)-($(loading).height()/2)).css("left", ($(document).width()/2)-($(loading).width()/2));
//добавляем созданный div в конец документа
$("body").append(loading);
},
complete: function() {
//уничтожаем div
$(".ds-loading").detach();
}
});
Теперь нам не нужно вешать обработчики событий на каждый вызов JQuery.ajax, этот функционал теперь “преднастроен” в каждом вызове.
