无需用户移动鼠标即可使浏览器光标从"等待"变为"自动"

Question

我使用这个jQuery代码在Ajax调用期间将鼠标指针设置为忙状态(沙漏)...

$('body').css('cursor', 'wait');

和相应的代码将其恢复正常...

$('body').css('cursor', 'auto');

这在某些浏览器上工作得很好.

在Firefox和IE上,只要执行命令,鼠标光标就会改变.这是我想要的行为.

在Chrome和Safari上,鼠标光标在用户移动指针之前不会从"忙"变为"自动".

让不情愿的浏览器切换鼠标指针的最佳方法是什么？

Answer 1

我宁愿这样做更优雅:

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS:

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

资料来源:http://postpostmodern.com/instructional/global-ajax-cursor-change/

Answer 2

目前这是两个浏览器中的一个错误.两个链接的更多细节(也在评论中):

http://code.google.com/p/chromium/issues/detail?id=26723

和

http://code.google.com/p/chromium/issues/detail?id=20717

Answer 3

我相信这个问题(包括mousedown问题)现在已在Chrome 50中修复.

但只有你没有使用开发者工具!

关闭工具,光标应立即响应更好.

Answer 4

我从Korayem解决方案中获得灵感.

使用Javascript:

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

CSS:

.busy * {
    cursor: wait !important;
}

在Chrome,Firefox和IE 10上测试.光标更改而无需移动鼠标.IE10需要"!important".

编辑:在AJAX请求完成后,您仍然必须在IE 10上移动光标(因此会出现正常光标).等待光标出现而不移动鼠标..