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

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

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