Zmiana kursora na czekanie w javascript / jquery

Jak zmienić kursor na tę ikonę ładowania, gdy wywoływana jest funkcja i jak zmienić ją z powrotem na normalny kursor w javascript / jquery

W swoim jQuery użyj:

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

a potem z powrotem do normalności

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

Kolega zaproponował podejście, które uważam za lepsze od wybranego tutaj rozwiązania. Najpierw w CSS dodaj tę regułę:

body.waiting * {
    cursor: progress;
}

Następnie, aby włączyć kursor postępu, powiedz:

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

Aby wyłączyć kursor postępu, powiedz:

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

Zaletą tego podejścia jest to, że gdy wyłączysz kursor postępu, wszystkie inne kursory, które mogły zostać zdefiniowane w twoim CSS, zostaną przywrócone. Jeśli reguła CSS nie ma wystarczającego pierwszeństwa, aby zastąpić inne reguły CSS, możesz dodać identyfikator do treści i reguły lub użyć !important.

Nie używaj do tego jQuery w 2018 roku! Nie ma powodu, aby włączać całą bibliotekę zewnętrzną tylko po to, aby wykonać tę jedną czynność, którą można wykonać za pomocą jednej linii:

Zmień kursor na spinner: document.body.style.cursor = 'wait';

Przywróć kursor do normalnego: document.body.style.cursor = 'default';

Poniższy sposób jest moim preferowanym sposobem i spowoduje zmianę kursora za każdym razem, gdy strona ma się zmienić, tj beforeunload

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

Korzystanie z jquery i css:

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

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

CSS: .wait {cursor:wait}​

Demo tutaj

Zastąp wszystkie pojedyncze elementy

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

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

Spowoduje to utworzenie kursora ładowania, dopóki wywołanie AJAX nie powiedzie się.

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

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

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

z powrotem
document.body.style.cursor = 'default';

Nie potrzebujesz do tego JavaScript. Możesz zmienić kursor na cokolwiek chcesz za pomocą CSS:

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

Zobacz tutaj, aby uzyskać informacje o obsłudze przeglądarek, ponieważ w zależności od przeglądarki występują pewne subtelne różnice

Oto coś, co możesz zrobić. Zdefiniuj funkcję do wywołania tuż przed każdym wywołaniem AJAX. Przypisz także funkcję do wywołania po zakończeniu każdego wywołania ajax. Pierwsza funkcja ustawi kursor oczekiwania, a druga wyczyści go. Wyglądają następująco:

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

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

Jeśli oszczędza zbyt szybko, spróbuj tego:

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

Ustawienie kursora na „treść” zmieni kursor na tło strony, ale nie na elementy sterujące na nim. Na przykład przyciski nadal będą miały zwykły kursor po najechaniu na nie kursorem. Oto, czego używam:

Aby ustawić kursor 'czekaj', stwórz element stylu i wstaw w nagłówku:

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

Następnie, aby przywrócić kursor, usuń element stylu:

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

Odkryłem, że jedynym sposobem na to, aby kursor skutecznie zresetował swój styl z powrotem do tego, jaki miał przed zmianą na styl oczekiwania, było ustawienie oryginalnego stylu w arkuszu stylów lub w tagach stylów na początku strony, ustaw klasę danego obiektu do nazwy stylu. Następnie, po okresie oczekiwania, ustawiasz styl kursora z powrotem na pusty ciąg, a nie na „domyślny”, i przywraca on pierwotną wartość ustawioną w znacznikach stylów lub arkuszu stylów. Ustawienie go na „domyślny” po okresie oczekiwania zmienia tylko styl kursora dla każdego elementu na styl o nazwie „domyślny”, którym jest wskaźnik. Nie przywraca jej pierwotnej wartości.

Istnieją dwa warunki, aby to zadziałało. Najpierw musisz ustawić styl w arkuszu stylów lub w nagłówku strony za pomocą tagów stylów, NIE jako styl wbudowany, a po drugie należy zresetować jego styl, ustawiając styl oczekiwania z powrotem na pusty ciąg.