Pull to refresh

Идет AJAX загрузка. Подождите…

Reading time1 min
Views1.2K

Обычно


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

image

Типичный подход при этом:
1. показать крутящуюся гифку в углу или где-нибудь на видном месте
2. начать загрузку (XHttpRequest и Ко)
3. когда загрузка заканчивается, убираем картинку.

Идея


Использовать анимацию курсора для отображения занятости приложения.

Скажем, в jQuery для этого достаточно выполнить:
$("*").css("cursor", "wait");

Вернуть курсоры:
$("*").css("cursor", "");

Данный сниппет поменяет состояние курсора над всеми элементами. Однако, почему бы и не ограничиться каким-нибудь конкретным объектом?

$(".элементы_которые_грузятся").css("cursor", "wait");



Плюсы


* Никаких изменений в структуре разметки
* Не задействовано никаких внешних элементов (можно, правда, использовать собственные *.cur файлы. Достоверный источник сообщает, что эта фича поддерживается всеми современными браузерами)
* Весьма интуитивно само по себе

Минусы


* Выглядит, как будто завис браузер (но если использовать нестандартный курсор, вполне отличимо)
* В разных ОСях выглядит по-разному (кстати, это и минус и плюс)

P.S.: пока искал прелоадер, случайно нашел сайт: www.loadinfo.net. Там можно сгенерить себе красивый прелоадер =)

Edit:
Вот, например, на подобной штуке, это выглядело бы очень уместно:
www.extjs.com/deploy/dev/examples/desktop/desktop.html

Edit2:
Вот этот курсор, собственно, даже лучше подходит, чем «wait»:
$("*").css("cursor", "progress");
Tags:
Hubs:
Total votes 30: ↑15 and ↓150
Comments20

Articles