Переводим курсор браузера из «жду» в «авто» без перемещения мыши

Question

Я использую этот код jQuery для установки указателя мыши в его занятое состояние (песочные часы) во время вызова Ajax ...

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

и соответствующий код, чтобы вернуть его в нормальное состояние ...

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

Это прекрасно работает ... в некоторых браузерах.

В Firefox и IE, как только я выполню команду, курсор мыши изменится. Это поведение, которое я хочу.

В Chrome и Safari курсор мыши заметно не меняется с «занято» на «авто», пока пользователь не переместит указатель.

Какой лучший способ заставить неохотные браузеры переключать указатель мыши?

Answer 1

Я бы предпочел сделать это более элегантно, вот так:

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS:

html.busy, html.busy * {  
  cursor: wait !important;  
}  

Источник: http://postpostmodern.com/instructional/global-ajax-cursor-change/

Answer 2

Это ошибка в обоих браузерах на данный момент. Подробности по обеим ссылкам (также в комментариях):

http://code.google.com/p/chromium/issues/detail?id=26723

и

http://code.google.com/p/chromium/issues/detail?id=20717

Answer 3

Я считаю, что эта проблема (включая проблему mousedown) теперь исправлена ​​в Chrome 50.

Но только если вы не используете инструменты разработчика !!

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

Answer 4

Меня вдохновило решение Korayem.

Javascript:

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

CSS:

.busy * {
    cursor: wait !important;
}

Проверено на Chrome, Firefox и IE 10. Курсор изменяется без перемещения мыши. «Важно!» требуется для IE10.

Редактировать: Вы все еще должны переместить курсор на IE 10 после завершения запроса AJAX (чтобы появился нормальный курсор). Ожидание курсора появляется без перемещения мыши.

Answer 5

Рабочий раствор на CodeSandbox

Некоторые другие решения не работают при любых обстоятельствах. Мы можем достичь желаемого результата с помощью двух правил CSS:

body.busy, .busy * {
  cursor: wait !important;
}

.not-busy {
  cursor: auto;
}

Первый указывает, что мы заняты, и применяется ко всем элементам на странице, пытаясь переопределить другие стили курсора. Последнее относится только к телу страницы и используется просто для принудительного обновления пользовательского интерфейса; мы хотим, чтобы это правило было как можно более неопределенным, и его не нужно применять к другим элементам страницы.

Затем мы можем запустить и завершить состояние занятости следующим образом:

function onBusyStart() {
    document.body.classList.add('busy');
    document.body.classList.remove('not-busy');
}

function onBusyEnd() {
    document.body.classList.remove('busy');
    document.body.classList.add('not-busy');
}

В итоге, хотя мы должны изменить стиль курсора для обновления курсора, прямое изменение document.body.style.cursor или аналогичного не имеет ожидаемого эффекта на некоторых движках, таких как Webkit, до тех пор, пока курсор не будет перемещен. Использование классов, чтобы повлиять на изменение, является более надежным. Однако для надежного принудительного обновления пользовательского интерфейса (опять же, на некоторых движках) мы должны добавить еще один класс. Кажется, удаление классов обрабатывается иначе, чем их добавление.

Answer 6

Прежде всего, вы должны знать, что если у вас есть курсор, назначенный любому тегу в вашем теле, $('body').css('cursor', 'wait'); не изменит курсор этого тега (как и я, я использую cursor: pointer; на всех моих тегах привязки ). Возможно, вы захотите сначала посмотреть на мое решение этой конкретной проблемы: курсор ждет вызова ajax

Для проблемы, связанной с обновлением курсора, только когда пользователь перемещает мышь в браузерах webkit, как говорили другие люди, реального решения не существует.

При этом все еще есть обходной путь, если вы динамически добавляете счетчик css к текущему курсору. Это не идеальное решение, потому что вы точно не знаете размер курсора и правильность расположения счетчика.

CSS блесна после курсора: DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

Вам также необходимо проверить, является ли это сенсорным устройством var isTouchDevice = typeof window.ontouchstart !== 'undefined';

В заключение, вам лучше попытаться добавить на свою страницу статический счетчик или что-то еще, что показывает процесс загрузки, вместо того, чтобы пытаться сделать это с помощью курсора.

Answer 7

Решение Кораема работает для меня в 100% случаев в современных Chrome, Safari, в 95% случаев в Firefox, но не работает в Opera и IE.

Я немного его улучшил:

$('html').bind('ajaxStart', function() {
    $(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
    $(this).removeClass('busy').addClass('notbusy');
});

CSS:

html.busy, html.busy * {
    cursor: wait !important;
}

html.notbusy, html.notbusy * {
    cursor: default !important;
}

Теперь это работает в 100% случаев в Chrome, Safari, Firefox и Opera. Я не знаю, что делать с IE: (

Answer 8

Начиная с jquery 1.9, вы должны ajaxStart и ajaxStop к документу . Они прекрасно работают для меня в Firefox. Не тестировал в других браузерах.

В CSS:

html.busy *
{
   cursor: wait !important;
}

В javaScript:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

Answer 9

ЗДЕСЬ мое решение:

function yourFunc(){

$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
 .mouseXPos(e.pageX + 1)
 .mouseYPos(e.pageX - 1);
});

}

Answer 10

.

$ ( '*') CSS ( 'курсор', 'ждать'); будет работать везде на странице, включая ссылки