Ändern des Cursors auf Warten in Javascript / JQuery

Wie würde ich meinen Cursor dazu bringen, auf dieses Ladesymbol zu wechseln, wenn eine Funktion aufgerufen wird, und wie würde ich ihn wieder in einen normalen Cursor in Javascript / jquery ändern

Verwenden Sie in Ihrer jQuery:

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

und dann wieder normal

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

Ein Kollege schlug einen Ansatz vor, den ich hier der gewählten Lösung vorzuziehen finde. Fügen Sie zunächst in CSS die folgende Regel hinzu:

body.waiting * {
    cursor: progress;
}

Um den Fortschrittscursor einzuschalten, sagen Sie:

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

und um den Fortschrittscursor auszuschalten, sagen Sie:

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

Der Vorteil dieses Ansatzes besteht darin, dass beim Ausschalten des Fortschrittscursors alle anderen in Ihrem CSS definierten Cursor wiederhergestellt werden. Wenn die CSS-Regel nicht leistungsfähig genug ist, um andere CSS-Regeln zu überschreiben, können Sie dem Textkörper und der Regel eine ID hinzufügen oder verwenden !important.

Bitte verwenden Sie dafür 2018 nicht jQuery! Es gibt keinen Grund, eine gesamte externe Bibliothek einzuschließen, um nur diese eine Aktion auszuführen, die mit einer Zeile ausgeführt werden kann:

Ändern Sie den Cursor auf Spinner: document.body.style.cursor = 'wait';

Cursor auf normal zurücksetzen: document.body.style.cursor = 'default';

Das Folgende ist meine bevorzugte Methode und ändert den Cursor jedes Mal, wenn sich eine Seite ändert, z beforeunload

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

Verwenden von jquery und css:

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

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

CSS: .wait {cursor:wait}​

Demo hier

Alle einzelnen Elemente überschreiben

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

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

Dadurch wird ein Ladecursor erstellt, bis Ihr Ajax-Aufruf erfolgreich ist.

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

wieder zurück
$("body").css("cursor", "default");

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

wieder zurück
document.body.style.cursor = 'default';

Sie benötigen dafür kein JavaScript. Sie können den Cursor mithilfe von CSS auf alles ändern, was Sie möchten:

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

Informationen zur Browserunterstützung finden Sie hier , da es je nach Browser einige geringfügige Unterschiede gibt

Hier ist noch etwas Interessantes, das Sie tun können. Definieren Sie eine Funktion, die unmittelbar vor jedem Ajax-Aufruf aufgerufen werden soll. Weisen Sie auch eine Funktion zu, die nach jedem Ajax-Aufruf aufgerufen werden soll. Die erste Funktion setzt den Wartecursor und die zweite löscht ihn. Sie sehen wie folgt aus:

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

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

Wenn es zu schnell spart, versuchen Sie Folgendes:

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

Wenn Sie den Cursor auf "body" setzen, wird der Cursor für den Hintergrund der Seite geändert, nicht jedoch für die Steuerelemente. Beispielsweise haben Schaltflächen beim Bewegen des Mauszeigers weiterhin den normalen Cursor. Folgendes verwende ich:

Um den Wartecursor zu setzen, erstellen Sie ein Stilelement und fügen Sie es in den Kopf ein:

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

Löschen Sie dann das Stilelement, um den Cursor wiederherzustellen:

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

Ich fand heraus, dass die einzige Möglichkeit, den Cursor dazu zu bringen, seinen Stil effektiv auf das zurückzusetzen, was er vor dem Ändern des Wartestils hatte, darin bestand, den ursprünglichen Stil in einem Stylesheet oder in Stil-Tags am Anfang der Seite festzulegen die Klasse des betreffenden Objekts zum Namen des Stils. Nach Ihrer Wartezeit setzen Sie den Cursor-Stil auf eine leere Zeichenfolge zurück, NICHT auf "Standard", und er wird auf den ursprünglichen Wert zurückgesetzt, der in Ihren Style-Tags oder im Stylesheet festgelegt wurde. Wenn Sie es nach der Wartezeit auf "Standard" setzen, wird nur der Cursorstil für jedes Element in den Stil "Standard" geändert, bei dem es sich um einen Zeiger handelt. Es ändert es nicht zurück zu seinem früheren Wert.

Es gibt zwei Bedingungen, damit dies funktioniert. Erstens müssen Sie den Stil in einem Stylesheet oder in der Kopfzeile der Seite mit Stil-Tags festlegen, NICHT als Inline-Stil, und zweitens müssen Sie seinen Stil zurücksetzen, indem Sie den Wartestil auf eine leere Zeichenfolge zurücksetzen.