将光标更改为在javascript / jquery中等待

Question

当调用函数时，如何让光标更改为此加载图标？如何将其更改回javascript / jquery中的普通光标

Answer 1

在你的jQuery中使用：

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

然后再恢复正常

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

Answer 2

一位同事提出了一种方法，我认为这种解决方案比所选方案更可行。首先，在CSS中添加以下规则：

body.waiting * {
    cursor: progress;
}

然后，要打开进度光标，请说：

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

并关闭进度光标，说：

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

这种方法的优点是当你关闭进度光标时，你的CSS中定义的任何其他光标都将被恢复。 如果CSS规则的优先级不足以否决其他CSS规则，则可以向正文和规则添加id，或使用!important。

Answer 3

请不要在2018年使用jQuery！没有理由包含整个外部库只是为了执行这一行动，可以用一行来实现：

将光标更改为微调器：document.body.style.cursor = 'wait';

将光标恢复为正常：document.body.style.cursor = 'default';

Answer 4

使用jquery和css：

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

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

CSS：.wait {cursor:wait}​

Demo here

Answer 5

以下是我的首选方式，每次页面即将更改时都会更改光标，即beforeunload

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

Answer 6

您不需要JavaScript。您可以使用CSS将光标更改为您想要的任何内容：

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

有关浏览器支持，请参阅here，因为根据浏览器存在一些细微的差异

Answer 7

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

这将创建一个加载光标，直到你的ajax调用成功。

Answer 8

覆盖所有单个元素

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

Answer 9

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

再次回来了 $("body").css("cursor", "default");

纯：
document.body.style.cursor = 'progress';

再次回来了 document.body.style.cursor = 'default';

Answer 10

这是你可以做的其他有趣的事情。定义一个在每次ajax调用之前调用的函数。在每个ajax调用完成后，还分配一个函数来调用。第一个函数将设置等待光标，第二个函数将清除它。它们如下所示：

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

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

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

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

Answer 13

我发现，使光标有效地将其样式重置为更改为等待样式之前的样式的唯一方法是在样式表或样式标签的开头设置原始样式。页面上，将相关对象的类设置为样式的名称。然后，在您的等待时间之后，将光标样式设置回空字符串，而不是“默认”，并且它恢复为样式标签或样式表中设置的原始值。在等待时间之后将其设置为“默认”只会将每个元素的光标样式更改为称为指针的“默认”样式。它不会将其恢复为以前的值。

有两个条件可以使此项工作。首先，您必须在样式表或带有样式标签的页面标题中设置样式，而不是将其设置为内联样式，其次是通过将等待样式设置回空字符串来重置其样式。