Получение курсора браузера от "wait" до "auto" без перемещения пользователем мыши

Ответ 1

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

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

и

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 5

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

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

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

CSS spinner после курсора: 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';

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

Ответ 6

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

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

Ответ 7

Решение Korayem работает для меня в 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: (

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

}

Ответ 12

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

Ответ 13

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

Ответ 14

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