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

我将如何让我的光标更改为此加载图标时调用一个函数，如何将其更改回到正常的光标在JavaScript / jQuery

Answer 1

在你的jQuery中使用：

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

然后再恢复正常

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

Answer 2

一位同事提出了一种方法，我觉得这里select的解决scheme更可取。 首先，在CSS中添加这个规则：

 body.waiting * { cursor: progress; } 

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

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

并closures进度光标，说：

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

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

Answer 3

覆盖所有单个元素

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

Answer 4

使用jQuery和CSS：

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

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

CSS： .wait {cursor:wait}​

在这里演示

Answer 5

你不需要这个JavaScript。 你可以改变光标到任何你想要使用CSS：

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

浏览器支持请看这里，因为浏览器有一些细微的差别

Answer 6

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

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

Answer 7

以下是我的首选方法，每次页面即将更改（即在未beforeunload都会更改光标

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

Answer 8

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

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

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

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

Answer 9

这是另外一件有趣的事情，你可以做。 定义一个函数在每个Ajax调用之前调用。 每个ajax调用完成后还要分配一个函数来调用。 第一个函数将设置等待光标，第二个函数将清除它。 他们看起来像下面这样：

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

Answer 10

如果节省得太快，试试这个：

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