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

StackOverflow https://stackoverflow.com/questions/1718415

Вопрос

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

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

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

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

Это отлично работает...в некоторых браузерах.

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

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

Как лучше всего заставить сопротивляющиеся браузеры переключать указатель мыши?

Это было полезно?

Решение

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

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

и

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

Другие советы

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

$(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/

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

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

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

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

Javascript:

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

CSS:

.busy * {
    cursor: wait !important;
}

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

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

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

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

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

CSS-спиннер, следующий за курсором: ДЕМО

$.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';

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

Решение Корайема у меня работает в 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 :(

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

Я не думаю, что ты сможешь это сделать.

Однако попробуйте изменить положение прокрутки;это может помочь.

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

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

}

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

В 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' ) } )

Попробуйте использовать правильное значение CSS для свойства курсора:

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

http://www.w3schools.com/CSS/pr_class_cursor.asp

Вероятно, это ошибка в WebKit;вам следует доложите об этом.

Я не пробовал этого, но что, если вы создадите прозрачный элемент div, который будет абсолютно позиционирован и заполнит область просмотра непосредственно перед изменением CSS?Затем, когда CSS изменится в теле, удалите div.Этот мощь вызвать событие наведения курсора мыши на тело, которое мощь заставить курсор обновиться до последнего значения CSS.

Опять же, я не проверял это, но попробовать стоит.

Привет, ребята, у меня есть простое решение, которое работает во всех браузерах.Предполагается, что используется библиотека прототипов.Кто-то может написать это и на простом Javascript.Решение состоит в том, чтобы разместить элемент div поверх всего сразу после сброса курсора и немного встряхнуть его, чтобы курсор переместился.Это опубликовано в моем блоге http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top