Question

在等待.load（）的响应时，有没有办法将光标更改为busy / wait光标？

Answer 1

尝试：

已更新以使用jQuery 1.8 +

$(document).ajaxStart(function() {
    $(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
    $(document.body).css({'cursor' : 'default'});
});

任何ajax开始和结束时光标都会发生变化。这包括.load()。

在这里尝试不同的光标样式：

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Answer 2

我不得不调整上面的雄辩答案来使用jQuery＆gt; 1.8。

$(document).ajaxStart(function () {
    $(document.body).css({ 'cursor': 'wait' })
});
$(document).ajaxComplete(function () {
    $(document.body).css({ 'cursor': 'default' })
});

Answer 3

我不喜欢简单地将css属性添加到body标签的解决方案：如果已经将光标分配给元素，那么它将不起作用。像我一样，我在所有锚标签上使用cursor: pointer;。所以，我提出了这个解决方案：

创建一个CSS类以避免覆盖当前光标（之后能够恢复正常）

.cursor-wait {
    cursor: wait !important;
}

创建添加和删除光标的功能

cursor_wait = function()
{
    // switch to cursor wait for the current element over
    var elements = $(':hover');
    if (elements.length)
    {
        // get the last element which is the one on top
        elements.last().addClass('cursor-wait');
    }
    // use .off() and a unique event name to avoid duplicates
    $('html').
    off('mouseover.cursorwait').
    on('mouseover.cursorwait', function(e)
    {
        // switch to cursor wait for all elements you'll be over
        $(e.target).addClass('cursor-wait');
    });
}

remove_cursor_wait = function()
{
    $('html').off('mouseover.cursorwait'); // remove event handler
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default
}

然后创建你的ajax函数（我不使用像ajaxStart或ajaxStop这样的事件，因为我不想在所有的ajax调用中使用游标等待）

get_results = function(){

    cursor_wait();

    $.ajax({
        type: "POST",
        url: "myfile.php",

        data: { var : something },

        success: function(data)
        {
            remove_cursor_wait();
        }
    });
}

我对jQuery load（）不太熟悉，但我猜它会是这样的：

$('button').click(function()
{
    cursor_wait();

    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr)
    {
        if (statusTxt == "success")
        { remove_cursor_wait(); }
    });
});

<强> DEMO

希望它有所帮助！

Answer 4

您可以使用：

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

开始加载之前，完成后将光标更改为自动

Answer 5

我希望这会有所帮助

$("body").css('cursor','wait');
   //or
   $("body").css('cursor','progress');

问候

Answer 6

我尝试了我在这里和其他地方找到的各种方法，并决定在各种浏览器（甚至设置，如RDP / VNC /终端用户）中更改鼠标光标时有太多错误。所以我最终得到了这个：

在我的应用初始化代码中，在文档就绪后触发：

    // Make working follow the mouse
    var working = $('#Working');
    $(document).mousemove(function(e) {
        working.css({
            left: e.pageX + 20,
            top: e.pageY
        });
    });

    // Show working while AJAX requests are in progress
    $(document).ajaxStart(function() {
        working.show();
    }).ajaxStop(function() {
        working.hide();
    });

在我的HTML结束时，就在我的身体里面：

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div>

它的工作原理很像Windows中的“app loading”鼠标光标，你仍然可以获得正常光标，但你也可以知道发生了什么。这在我的情况下是理想的，因为我希望用户觉得他们在等待时仍然可以做其他事情，因为我的应用到目前为止处理得非常好（测试的早期阶段）。

我的loading.gif文件只是一个典型的旋转轮，大约16x16像素，所以不太烦人，但很明显。

Answer 7

尝试：

$(document).ajaxStart(function () {
    $('body').css('cursor', 'wait');
}).ajaxStop(function () {
    $('body').css('cursor', 'auto');
});

从jQuery 1.8开始，.ajaxStop（）和.ajaxComplete（）方法只能附加到文档。

将.ajaxStop（）与.ajaxComplete（）交换，都给了我满意的结果。

Answer 8

将正文的CSS更改为cursor: progress。

要做到这一点，只需使用此CSS创建一个“等待”类，然后从正文中添加/删除该类。

CSS：

.waiting {
    cursor: progress;
}

然后在你的JS中：

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

您可以稍后使用.removeClass将其删除。

如何在使用jQuery .load（）时将光标更改为等待

8 个答案: