Смена стиля курсора на загрузку в JavaScript и jQuery
Быстрый ответ
Давайте придадим курсору указывать: "Всё под контролем!"
Чтобы курсор отображал состояние ожидания, введите следующий код в консоль вашего браузера:
// Начинается волшебство...🔮
document.body.style.cursor = 'wait';
Как только задача выполнится, верните курсор обратно в обычное состояние по умолчанию:
// Всё готово, можно расслабиться.
document.body.style.cursor = 'default';
Для любителей jQuery:
// Режим ожидания включён...
$('body').css('cursor', 'wait');
// И выключен.
$('body').css('cursor', 'default');
Тонкая настройка изменений курсора: Искусство эффективности
Для обозначения продолжительных операций стиль курсора должен успокаивать и информировать пользователей:
- Переключайтесь в режим ожидания до начала затратных операций.
- Воспользуйтесь JavaScript для простоты или jQuery, если он вам больше нравится.
- Ежели CSS стили не применяются, поощряйтесь более специфическими селекторами или добавьте ключевое слово
!important
. - Рекомендуется использование переключения классов в jQuery для более динамичного управления состояниями курсора.
Кроссбраузерная совместимость: Потому что это важно
Меняя курсоры, проверьте их отображение в разных браузерах:
- Лучше использовать стандартные обозначения, например 'wait' и 'default'.
- Собрались создать собственный курсор? Прекрасно, но не забывайте о стандартном варианте на всякий случай.
- Применение стилей к тегу
body
безопасно, но можно также обращаться к конкретным селекторам или использовать селектор*
для глобальных изменений.
Плавные переходы: Делаем использование удобным
Избегайте неожиданных перемен:
- Возвращайте курсор в состояние
default
, как только "тяжёлые" вычисления завершатся. - Изменения должны быть контекстуальными и понятными для пользователя.
- При интенсивной загрузке страницы или перед её закрытием изменение курсора информирует пользователей о происходящем.
Продвинутое управление курсором: Поднимаем уровень вашей игры
Взаимодействие с помощью CSS
Иногда CSS — это то, что вам необходимо:
// В режиме ожидания...
body.waiting, body.waiting * {
cursor: wait !important; // мы настоем!
}
Добавляйте или удаляйте этот класс с помощью JavaScript:
// Подготовимся к состоянию ожидания...
document.body.classList.add('waiting');
// Отключаем "ожидание".
$('body').addClass('waiting');
Управление с помощью событий
ajaxStart
и ajaxStop
в jQuery автоматизируют настройку курсора:
// Буду звгружен, пока я занят.
$(document).on("ajaxStart", function() {
$('body').css("cursor", "wait");
}).on("ajaxStop", function() {
// Закончил? Вернёмся к нормальному ритму.
$('body').css("cursor", "default");
});
Асинхронные задачи и вы
Для асинхронных операций уместно использовать промисы:
// Терпение – залог успеха.
async function loadData() {
document.body.style.cursor = 'wait'; // Время для кофе-брейка!
await fetchData(); // Функция загрузки данных
document.body.style.cursor = 'default'; // Возвращаемся к работе!
}
Визуализация
Визуализируем изменение состояния курсора:
До: [🌐✋] (Клик)
После: [🌐⌛] (Ожидание...)
По вашей команде курсор меняется с привычного состояния по умолчанию (🖱✋) на трудолюбивый режим ожидания (🖱⌛), точно так же, как светофор переходит с зелёного цвета (🚦🟢) на жёлтый (🚦🟡).
Занимательные истории из мира курсоров
Столкновение титанов CSS
Если ваши стили курсора конфликтуют, как упрямые козлы:
- Используйте
!important
, чтобы ваши стили преобразовались в приоритетные. - Воспользуйтесь инструментами разработчика браузера, чтобы обнаружить конкурирующие стили.
Задержка курсора
Задержка в изменении стиля курсора может быть связана с:
- Перегрузкой браузера задачами визуализации.
- Выполнением большого количества синхронных операций перед применением стилей.
Когда курсор ведёт себя странно
Если курсор откликается некорректно:
- Удостоверьтесь, что изменения применяются к нужным элементам.
- Можно использовать
$('*').css("cursor", "progress");
для глобальных изменений, но следите за производительностью.