Changing cursor to waiting in javascript/jquery

enter image description here

How would i get my cursor to change to this loading icon when a function is called and how would i change it back to a normal cursor in javascript/jquery

184234 次浏览
小开

你不需要 JavaScript，你可以用 CSS 把光标改成任何你想要的样子:

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

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

小开
最佳答案

在你的 jQuery 使用中:

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

然后又恢复正常

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

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

小开

使用 jquery 和 css:

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

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

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

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

body.waiting * {
cursor: progress;
}

然后，打开进度光标，说:

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

并关闭进度光标，说:

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

这种方法的优点是，当您关闭进度游标时，您的 CSS 中可能已经定义的任何其他游标都将被恢复。 如果 CSS 规则的优先级不够强大，无法推翻其他 CSS 规则，您可以向主体和规则添加 id，或者使用 !important。

小开

下面是我的首选方法，并将更改光标每次页面即将改变，即 beforeunload

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

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

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

纯粹:
document.body.style.cursor = 'progress';

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

小开

请不要在2021年为此使用 jQuery！没有理由仅仅为了执行这个只需要一行代码就可以完成的操作而包含整个外部库:

将光标更改为旋转器: document.body.style.cursor = 'wait'

将光标恢复到正常值: document.body.style.cursor = 'default'

小开

将光标设置为“ body”将更改页面背景的光标，但不更改页面上的控件的光标。例如，当鼠标悬停在按钮上时，它们仍然保留常规的光标。以下是我正在使用的:

要设置“ wait”游标，创建一个 style 元素并插入到 head:

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

然后，为了恢复光标，删除 style 元素:

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

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

要做到这一点，有两个条件。首先，您必须在样式表中或在带有样式标记的页面标题中设置样式，而不是作为内联样式，其次是通过将等待样式设置为空字符串来重置其样式。

小开

Css:

html.wait, html.wait * { cursor: wait !important; }

点击:

onclick: "myFunction();"  //call your procedure

单击前单独更改光标:

onmousedown="$('html').addClass('wait');"

在你任期结束时:

$('html').removeClass('wait');" //back to normal cursor

或者最好在函数开始时超时光标恢复: (在您的函数结束执行操作后恢复光标50ms)

setTimeout(function() { $('html').removeClass('wait') }, 50);

大家一起:

<div style="cursor: pointer" onmousedown="$('html').addClass('wait');" onclick="sample('DE');">sample</div>


<script>
function sample(c) {
//timeout (this waits 50ms after function completed to restore cursor)
setTimeout(function() { $('html').removeClass('wait') }, 50);
    

//do your stuff including a calling opening a modal window
//call ajax etc,
    

}
</script>

提交答案