Изменение курсора на ожидание в javascript/jquery

Ответ 1

В вашем использовании jQuery:

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

а затем снова вернуться к нормальной работе

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

Ответ 2

Коллега предложил подход, который я считаю предпочтительным для выбранного решения здесь. Во-первых, в CSS добавьте это правило:

body.waiting * {
    cursor: progress;
}

Затем, чтобы включить курсор прогресса, скажем:

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

и выключить курсор прогресса, скажем:

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

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

Ответ 3

Использование jquery и css:

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

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

CSS: .wait {cursor:wait}​

Демо здесь

Ответ 4

Отменить все отдельные элементы

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

Ответ 5

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

Это создаст курсор загрузки, пока ваш вызов ajax не удастся.

Ответ 6

Для этого вам не нужен JavaScript. Вы можете изменить курсор на все, что хотите, используя CSS:

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

Смотрите здесь для поддержки браузера, поскольку есть некоторые тонкие различия в зависимости от браузера

Ответ 7

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

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

Ответ 8

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

назад
$("body").css("cursor", "default");

Pure:
document.body.style.cursor = 'progress';

назад
document.body.style.cursor = 'default';

Ответ 9

Пожалуйста, не используйте jQuery для этого в 2018 году! Нет никакой причины включать всю внешнюю библиотеку только для того, чтобы выполнить это одно действие, которое может быть достигнуто одной строкой:

Изменить курсор на спиннер: document.body.style.cursor = 'wait';

Вернуть курсор в нормальное состояние: document.body.style.cursor = 'default';

Ответ 10

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

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

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

Ответ 11

Если он экономится слишком быстро, попробуйте следующее:

<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");

Ответ 12

Установка курсора для "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);
}

Ответ 13

Я обнаружил, что единственный способ заставить курсор эффективно сбросить свой стиль обратно к тому, что он имел до перехода на стиль ожидания, - это установить исходный стиль в таблице стилей или в тегах стилей в начале страницы. класс рассматриваемого объекта на имя стиля. Затем, после периода ожидания, вы устанавливаете стиль курсора обратно на пустую строку, а НЕ "по умолчанию", и он возвращается к своему первоначальному значению, как установлено в ваших тегах стиля или таблице стилей. Установка этого значения по умолчанию после периода ожидания изменяет стиль курсора только для каждого элемента на стиль, называемый по умолчанию, который является указателем. Это не меняет его обратно на прежнее значение.

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