Как изменить курсор для ожидания при использовании jQuery.load()

Ожидая ответа от .load(), есть ли способ изменить курсор на курсор занятого/ожидающего?

Ответ 1

Try:

Обновлен для работы с 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

Ответ 2

Мне пришлось настроить красноречивый ответ выше, чтобы работать с jQuery > 1.8.

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

Ответ 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

Надеюсь, что это поможет!

Ответ 4

Вы можете использовать это:

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

прежде чем вы начнете загрузку и после завершения измените курсор на автоматический

Ответ 5

Я надеюсь, что это поможет

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

привет

Ответ 6

Я пробовал различные методы, которые я нашел здесь и в других местах, и решил, что в разных браузерах (или даже настройках, таких как пользователи RDP/VNC/Terminal) слишком много ошибок, с изменением указателя мыши. Поэтому вместо этого я закончил с этим:

Внутри кода запуска приложения, который запускается после завершения документа:

    // 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, где вы по-прежнему получаете свой обычный курсор, но вы также можете сказать, что что-то происходит. Это идеальный вариант для моего случая, потому что я хочу, чтобы пользователь почувствовал, что он все еще может делать другие вещи во время ожидания, так как мое приложение хорошо справляется до сих пор (ранние этапы тестирования).

Мой файл load.gif - это просто типичное вращающееся колесо, около 16x16 пикселей, поэтому не слишком раздражает, но очевидно.

Ответ 7

Try:

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

Как и в jQuery 1.8, методы .ajaxStop() и .ajaxComplete() должны быть прикреплены только к документу.

Перестановка .ajaxStop() с .ajaxComplete() дала мне удовлетворительные результаты.

Ответ 8

Измените тело CSS на cursor: progress.

Для этого просто создайте класс "ожидания" с помощью этого CSS, а затем добавьте/удалите класс из тела.

CSS

.waiting {
    cursor: progress;
}

Затем в вашем JS:

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

Вы можете удалить его позже с помощью .removeClass.