How to change cursor to wait when using jQuery .load()

Question

While waiting for a response from a .load(), is there any way to change the cursor to the busy/wait cursor?

Answer 1

I don't like the solution that simply add the css property to the body tag: it's not gonna work if you already have a cursor assigned to your element. Like me, I use cursor: pointer; on all my anchor tag. So, I came up with this solution:

Create a CSS class to avoid overwriting the current cursor (to be able to go back to normal afterwards)

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

Create the functions to add and remove the cursor

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
}

Then create your ajax function (I don't use events like ajaxStart or ajaxStop because I don't want to use cursor wait with all my ajax call)

get_results = function(){

    cursor_wait();

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

        data: { var : something },

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

I'm not very familiar with jQuery load(), but I guess it will be something like this:

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

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

DEMO

Hope it helps!