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

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

目前这两种浏览器都存在错误。两个链接上的更多详细信息（也在 cmets 中）：

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 上移动光标（因此出现正常光标）。等待光标出现而不移动鼠标..

Answer 5

首先，您应该知道，如果您将光标分配给正文中的任何标签，$('body').css('cursor', 'wait'); 不会更改该标签的光标（像我一样，我在所有锚标签上都使用 cursor: pointer; ）。您可能想先看看我对这个特定问题的解决方案：cursor wait for ajax call

对于其他人说的webkit浏览器上只有用户移动鼠标才会更新光标的问题，目前还没有真正的解决方案。

话虽如此，如果您动态地将 CSS 微调器添加到当前光标，仍然有一种解决方法。这不是一个完美的解决方案，因为您不确定光标的大小以及微调器是否会正确定位。

光标后的 CSS 微调器：DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

您还需要检查它是否是触摸设备var isTouchDevice = typeof window.ontouchstart !== 'undefined';

总之，您最好尝试在页面中添加静态微调器或其他显示加载过程的东西，而不是尝试使用光标来完成。

Answer 6

Korayem 的解决方案在现代 Chrome、Safari 中 100% 对我有效，在 Firefox 中 95% 有效，但在 Opera 和 IE 中无效。

我稍微改进了一下：

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

CSS：

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

html.notbusy, html.notbusy * {
    cursor: default !important;
}

现在它在 Chrome、Safari、Firefox 和 Opera 中可以 100% 运行。 我不知道如何处理 IE :(

Answer 7

Working solution on CodeSandbox

其他一些解决方案并非在所有情况下都有效。我们可以通过两条 css 规则来达到预期的效果：

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

.not-busy {
  cursor: auto;
}

前者表示我们很忙，适用于页面上的所有元素，试图覆盖其他光标样式。后者仅适用于页面正文，仅用于强制 UI 更新；我们希望这条规则尽可能不具体，并且不需要应用于其他页面元素。

然后我们可以如下触发和结束忙碌状态：

function onBusyStart() {
    document.body.classList.add('busy');
    document.body.classList.remove('not-busy');
}

function onBusyEnd() {
    document.body.classList.remove('busy');
    document.body.classList.add('not-busy');
}

综上所述，虽然我们必须改变光标样式来更新光标，但直接修改document.body.style.cursor或类似的东西并没有达到预期的效果，在一些引擎如Webkit上，直到光标移动为止。使用类来影响更改更加健壮。然而，为了可靠地强制 UI 更新（同样，在某些引擎上），我们必须添加另一个类。似乎删除类与添加类的处理方式不同。

Answer 8

我认为你做不到。

但是，请尝试更改滚动位置；它可能会有所帮助。

Answer 9

这是我的解决方案：

function yourFunc(){

$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
 .mouseXPos(e.pageX + 1)
 .mouseYPos(e.pageX - 1);
});

}

Answer 10

从 jquery 1.9 开始，你 should ajaxStart and ajaxStop to document。他们在 Firefox 中为我工作得很好。没有在其他浏览器上测试过。

在 CSS 中：

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

在 JavaScript 中：

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

Answer 11

尝试为光标属性使用正确的 css 值：

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

http://www.w3schools.com/CSS/pr_class_cursor.asp

Answer 12

我还没有尝试过，但是如果您创建一个绝对定位的透明 div 并在更改 CSS 之前填充视口会怎样。然后，当身体上的 css 发生变化时，删除 div。这可能会触发 body 上的 mouseover 事件，可能会导致光标更新为最新的 CSS 值。

同样，我还没有对此进行测试，但值得一试。

Answer 13

大家好，我有一个适用于所有浏览器的基本解决方案。假设使用原型库。也有人可以将其编写为纯 Javascript。解决方案是在您重置光标并稍微摇动它以使光标移动之后，在所有顶部放置一个 div。这发表在我的博客http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html。

Answer 14

$('*').css('cursor','wait');将在页面上的任何地方工作，包括链接