71

我在 Ajax 调用期间使用此 jQuery 代码将鼠标指针设置为忙碌状态（沙漏）......

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

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

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

这工作正常......在某些浏览器上。

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

在 Chrome 和 Safari 上，鼠标光标在用户移动指针之前不会明显地从“忙碌”变为“自动”。

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

4

14 回答 14

38

我宁愿更优雅地这样做：

$(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/

于 2011-03-01T21:47:23.820 回答
36

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

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

和

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

于 2009-11-18T14:27:55.907 回答
24

我相信这个问题（包括 mousedown 问题）现在已在 Chrome 50 中得到修复。

但前提是您不使用开发人员工具！！

关闭工具，光标应立即做出更好的响应。

于 2016-05-20T16:30:45.603 回答
7

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

于 2013-11-29T12:00:09.583 回答
1

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 :(

于 2013-06-21T06:38:01.863 回答
1

首先，您应该知道，如果您将光标分配给正文中的任何标签，$('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';

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

于 2016-06-23T14:42:15.580 回答
1

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 更新（同样，在某些引擎上），我们必须添加另一个类。似乎删除类与添加它们的处理方式不同。

于 2018-10-05T12:22:16.877 回答
0

我不认为你能做到。

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

于 2009-11-11T22:15:00.640 回答
0

这是我的解决方案：

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

}
于 2013-04-02T08:06:23.230 回答
0

从 jquery 1.9 开始，您应该使用 ajaxStart 和 ajaxStop 来记录. 他们在 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' ) } )
于 2014-12-25T07:27:18.207 回答
-1

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

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

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

于 2009-11-12T02:03:10.363 回答
-1

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

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

于 2009-11-18T14:32:36.093 回答
-1

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

于 2011-02-04T13:21:24.827 回答
-3

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

于 2012-11-27T23:59:56.497 回答