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

在这里输入图像说明

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

在你的jQuery中使用:

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

然后再恢复正常

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

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

 body.waiting * { cursor: progress; } 

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

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

并closures进度光标,说:

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

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

覆盖所有单个元素

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

使用jQuery和CSS:

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

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

CSS: .wait {cursor:wait}​

在这里演示

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

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

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

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

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

以下是我的首选方法,每次页面即将更改(即在未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';

这是另外一件有趣的事情,你可以做。 定义一个函数在每个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");