将光标更改为在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}?

在这里演示

Answer 5

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

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

Answer 6

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

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

Answer 7

覆盖所有单个元素

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

Answer 8

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

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

请参阅此处获取浏览器支持,因为根据浏览器存在一些细微差别

Answer 9

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

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

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

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