Working solution on CodeSandbox

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

Answer 5

Korayem的解决方案在现代Chrome，Safari中占100％，在95％的情况下适用于Firefox，但在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 6

首先，您应该知道，如果您将光标分配给身体内的任何标记，$('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 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');
}

总而言之，尽管我们必须更改游标样式以更新游标，但在某些组件（例如Webkit）上，直接修改document.body.style.cursor或类似内容并没有达到预期的效果，直到游标被移动为止。使用类来影响更改更加健壮。但是，为了可靠地强制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

这可能是WebKit中的一个错误;你应该report it。

Answer 13

我还没试过这个，但是如果你创建一个绝对定位的透明div并在更改CSS之前填充视口呢？然后，当在身体上更改css时，删除div。此可能触发正文上的鼠标悬停事件，可能导致光标更新为最新的CSS值。

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

Answer 14

嘿伙计们，我有一个适用于所有浏览器的实用解决方案。假设是原型库使用。有人可以把它写成普通的Javascript。解决方案是在重置光标之后将一个div放在最重要的位置并稍微摇动它以使光标移动。这发布在我的博客http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html中。

Answer 15

。

$（ '*'）的CSS（ '光标'， '等待'）;将在页面上的任何地方工作，包括链接

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

15 个答案:

Working solution on CodeSandbox