A bit of Ajax: Protoload

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

Ручками это все писать, естественно, не очень хочется, тем более, слабо верится, что подобные вещи до нас никто не делал. Поэтому, чтобы не изобретать велосипед, можно обратиться к чудненькому добавлению к стандартной ajaxовой библиотеке Prototype -- Protoload.

Protoload -- js-файлик с двумя функциями: startWaiting() и stopWaiting(). Они заставляют нужный вам блок, кнопку, строку, див, всю страницу, и т.п. покрываться полупрозрачным фоном, на котором (опционально) может отображаться милая gif-картиночка, изображающая, что страница усиленно думает. Свойства картиночки, ее размещение определяются в css, как какой-нибудь класс. Этот класс передается в метод startWaiting().

Простой пример: заставим див с id='main' покрыться завесой загрузочной картинки.

Пусть есть функция, отправляющая ajax-запрос:

function submitAll() {
$('main').startWaiting('bigWaiting'); //заставляем див покрыться загрузчиком,
//передаем в startWaiting нужный css-класс. В описании класса указываем картинку,
//которую хотим использовать для загрузчика. Css идет в комплекте с js-файлом.
var submitAjax = new Ajax.Request('http://somewhere.com',
{
method:'post', parameters: data, //представим что данные есть+))
onComplete: parse_response
});
}

И соответственно parse_response, которая начнет выполняться, когда запрос вернется на страницу.

function parse_response(originalRequest) {
$('main').stopWaiting(); //див возвращается в исходное состояние
//а мы продолжаем обработку запроса...
....
}

Подключаем нужную css и js-файл к странице (не забыв предварительно подключить и Prototype.js) -- и собственно все=))
Картинок для загрузчика можно нагенерировать кучу, красивеньких и разных цветов. Например, тут.

Саму библиотеку можно скачать здесь. Прямая ссылка на архив -- тут.
Enjoy=)

Powered by ScribeFire.