38

在等待来自 .load() 的响应时，有没有办法将光标更改为忙/等待光标？

4

8 回答 8

73

尝试：

更新为与 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

于 2012-04-26T03:48:11.757 回答
11

我不得不调整上面雄辩的答案以使用 jQuery > 1.8。

$(document).ajaxStart(function () {
    $(document.body).css({ 'cursor': 'wait' })
});
$(document).ajaxComplete(function () {
    $(document.body).css({ 'cursor': 'default' })
});
于 2014-05-08T13:28:47.950 回答
8

我不喜欢简单地将 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(); }
    });
});

演示

希望能帮助到你！

于 2014-10-03T17:10:30.543 回答
5

你可以使用这个：

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

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

于 2012-04-26T03:46:42.530 回答
1

我希望这有帮助

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

问候

于 2012-04-26T03:48:31.310 回答
1

我尝试了在这里和其他地方找到的各种方法，并确定在各种浏览器（甚至设置，如 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 中的“应用程序加载”鼠标光标，您仍然可以看到正常的光标，但您也可以看出正在发生一些事情。这对我来说是理想的，因为我希望用户觉得他们在等待时仍然可以做其他事情，因为到目前为止我的应用程序处理得很好（测试的早期阶段）。

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

于 2013-05-09T04:13:13.763 回答
1

尝试：

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

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

将 .ajaxStop() 与 .ajaxComplete() 互换都给了我令人满意的结果。

于 2015-05-14T17:32:49.427 回答
0

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

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

CSS：

.waiting {
    cursor: progress;
}

然后在你的 JS 中：

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

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

于 2012-04-26T03:45:38.543 回答