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

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

Источник

8 ответов

Решение

Пытаться:

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

Источник

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

$(document).ajaxStart(function () {
    $(document.body).css({ 'cursor': 'wait' })
});
$(document).ajaxComplete(function () {
    $(document.body).css({ 'cursor': 'default' })
});
Источник

Мне не нравится решение, которое просто добавляет свойство 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

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

Источник

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

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

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

Источник

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

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

Привет

Источник

Пытаться:

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

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

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

Источник

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

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

Источник

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

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

CSS:

.waiting {
    cursor: progress;
}

Тогда в вашем JS:

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

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

Источник
Другие вопросы по тегам