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

---

调用函数时，如何使光标更改为此加载图标，以及如何在javascript/jquery中将光标更改为正常光标。您不需要使用javascript进行此操作。您可以使用CSS将光标更改为所需的任何内容：

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

有关浏览器支持的信息，请参见，因为在使用jQuery时，根据浏览器的不同，存在一些细微的差异：

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

然后又恢复正常

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

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

使用jquery和css：

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

HTML:

单击并等待​

CSS:
.wait{cursor:wait}​

覆盖所有单个元素

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

你还可以做一些有趣的事情。在每次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");


.autosave{显示：内联；填充：0 10px；颜色：绿色；字体重量：400；字体样式：斜体；}
成功保存
$（'span.autosave'）.fadeIn（“80”）；
$（'span.autosave'）.delay（“400”）；
$（'span.autosave'）.fadeOut（“80”）；
一位同事提出了一种方法，我认为这种方法比这里选择的解决方案更可取。首先，在CSS中，添加以下规则：

body.waiting * {
    cursor: progress;
}

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

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

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

要关闭进度光标，请说：

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

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

这种方法的优点是，当您关闭进度游标时，CSS中定义的任何其他游标都将被恢复。
如果CSS规则的优先级不足以推翻其他CSS规则，则可以向正文和规则中添加id，或者使用
！重要信息
以下是我的首选方式，每次页面即将更改时，即卸载之前，都会更改光标

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

jQuery:

$（“body”）.css（“光标”、“进度”）

再次返回

$（“body”）.css（“游标”、“默认值”）

纯：

document.body.style.cursor='progress'

再次返回

document.body.style.cursor='default'
请不要在2021年使用jQuery！没有理由仅仅为了执行这一操作而包含整个外部库，这一操作可以通过一行实现：

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

将光标恢复为正常状态：
document.body.style.cursor='default'
为“正文”设置光标将更改页面背景的光标，但不会更改页面上控件的光标。例如，当鼠标悬停在按钮上时，按钮仍将具有常规光标。以下是我正在使用的内容：

要设置“等待”光标，请创建样式元素并插入头部：

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

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

实现这一目标有两个条件。首先，您必须在样式表或带有样式标记的页面标题中设置样式，而不是作为内联样式，其次是通过将等待样式设置回空字符串来重置其样式。
如果您确实需要此光标，则需要指定url，否则（使用Roberts解决方案）每个用户都会看到加载光标，具体取决于他的操作系统。Christoph，其他操作系统的“等待”显示是什么我目前在windows 7上，因为目前它看起来很好，在vista中，它会显示与windows 7相同的光标，但它的动画不完整，在较旧的Windows操作系统上，它会显示良好的“沙漏”，在Linux或Mac操作系统上，它会显示各自的“等待”光标。另外，我建议不要操纵用户光标，因为这通常与操作系统操作相关，而是直接在网页上提供一些等待动画，这有助于用户第一眼看到等待操作是由您的站点而不是操作系统引起的。另请参阅桌面的好主意，对于移动设备来说，这是一个坏主意……这种方法的问题是，一旦等待结束，您将失去诸如：active/：hover等选择器的CSS样式。我使用了
$（“html，body”）
，因为我的页面的主体只适合窗口的一半，所以光标悬停在下半部分时仍然是默认的。页面上的其他元素（即引导按钮）如果将光标覆盖为非默认显示，则当光标仍在图元上时，将阻止此方法。在这些情况下，我发现最好使用
！重要信息
与@hrabinowitz的解决方案一起使用，位于活动JavaScript下：
document.body.style.cursor='progress'
document.body.style.cursor='default'如果在单击具有光标样式的元素时使用此方法，则还需要将样式应用于元素本身，否则除非用户将光标移离元素，否则不会显示新的光标图形。例如
el.css（“光标”、“进度”）el.css（“光标”）它不起作用，至少在Firefox中是这样。更改css将在javascript完成后显示。在脚本运行且exporer没有响应时，我没有找到如何重新绘制光标。这是迄今为止您可以执行的最简单和最简单的实现。Tha