Смена стиля курсора на загрузку в 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"); для глобальных изменений, но следите за производительностью.