Зміна курсору на очікування в JavaScript / jquery

Як я можу змусити мій курсор змінити цю піктограму завантаження, коли викликається функція, і як я поверну її до звичайного курсору у javascript / jquery

У використанні jQuery:

$("body").css("cursor", "progress");

і знову повернутися до норми

$("body").css("cursor", "default");

Колега запропонував підхід, який я вважаю за краще обране тут рішення. Спочатку в CSS додайте це правило:

body.waiting * {
    cursor: progress;
}

Потім, щоб увімкнути курсор прогресу, скажіть:

$('body').addClass('waiting');

і щоб вимкнути курсор прогресу, скажіть:

$('body').removeClass('waiting');

Перевага такого підходу полягає в тому, що при відключенні курсору прогресу все, що інші курсори, визначені у вашому CSS, буде відновлено. Якщо правило CSS не є достатньо потужним, щоб перекрити інші правила CSS, ви можете додати ідентифікатор до тіла та правила або використовувати !important.

Будь ласка, не використовуйте jQuery для цього у 2018 році! Немає підстав включати цілу зовнішню бібліотеку просто для виконання цієї однієї дії, яку можна досягти одним рядком:

Змінення курсору на спінер: document.body.style.cursor = 'wait';

Повернути курсор у звичайне: document.body.style.cursor = 'default';

Наступний мій бажаний спосіб, і буде змінювати курсор щоразу, коли сторінка збирається змінити, тобто beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

Використання jquery та css:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML: <div id="element">Click and wait</div>​

CSS: .wait {cursor:wait}​

Демо тут

Замініть всі єдині елементи

$("*").css("cursor", "progress");

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

Це створить курсор завантаження, поки ваш виклик Ajax не вдасться.

jQuery:
$("body").css("cursor", "progress");

знову
$("body").css("cursor", "default");

Чисто:
document.body.style.cursor = 'progress';

знову
document.body.style.cursor = 'default';

Для цього вам не потрібен JavaScript. Ви можете змінити курсор на що завгодно, використовуючи CSS:

selector {
    cursor: url(myimage.jpg), auto;
}

Дивіться тут про підтримку веб-переглядача, оскільки існують деякі тонкі відмінності залежно від браузера

Ось ще щось цікаве ви можете зробити. Визначте функцію для виклику безпосередньо перед кожним викликом ajax. Також призначте функцію для виклику після завершення кожного дзвінка ajax. Перша функція встановить курсор очікування, а друга очистить його. Вони виглядають так:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

Якщо це зберігається занадто швидко, спробуйте це:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

Якщо встановити курсор на "body", це змінить курсор для фону сторінки, але не для елементів керування на ньому. Наприклад, кнопки все ще матимуть звичайний курсор при наведенні на них. Далі - це те, що я використовую:

Щоб встановити курсор "чекати", створіть елемент стилю та вставте в голову:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

Потім, щоб відновити курсор, видаліть елемент стилю:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

Я виявив, що єдиний спосіб повернути курсор ефективно скинути стиль до того, що він мав до зміни стилю очікування, - це встановити оригінальний стиль у таблиці стилів або у тегах стилів на початку сторінки, встановити клас відповідного об'єкта до назви стилю. Потім після закінчення періоду очікування ви повертаєте стиль курсору до порожнього рядка, НЕ "за замовчуванням", і він повертається до його початкового значення, встановленого в тегах стилю або аркуші стилів. Якщо встановити його "за замовчуванням" після періоду очікування, лише змінює стиль курсора для кожного елемента на стиль, званий "за замовчуванням", який є вказівником. Це не повертає його до колишнього значення.

Є дві умови, щоб зробити цю роботу. По-перше, ви повинні встановити стиль у таблиці стилів або у заголовку сторінки за допомогою тегів стилів, НЕ як стиль вбудованого, а друге - скинути його стиль, встановивши стиль очікування назад у порожній рядок.