Obtendo o cursor do navegador de "Wait" para "Auto" sem que o usuário move o mouse

Question

Eu uso este código jQuery para definir o ponteiro do mouse para seu estado movimentado (ampulheta) durante uma chamada de Ajax ...

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

e este código correspondente para defini -lo de volta ao normal ...

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

Isso funciona bem ... em alguns navegadores.

No Firefox e IE, assim que eu executar o comando, o cursor do mouse muda. Este é o comportamento que eu quero.

No Chrome e Safari, o cursor do mouse não muda visivelmente de "ocupado" para "automático" até que o usuário mova o ponteiro.

Qual é a melhor maneira de fazer com que os navegadores relutantes mudem o ponteiro do mouse?

Answer 1

É um bug nos dois navegadores no momento. Mais detalhes nos dois links (em comentários também):

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

e

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

Answer 2

Eu prefiro fazer isso com mais elegância:

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

CSS:

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

Fonte: http://postpostmodern.com/instruckal/global-ajax-cursor-change/

Answer 3

Acredito que esse problema (incluindo o problema de Mousedown) agora está corrigido no Chrome 50.

Mas somente se você não estiver usando as ferramentas do desenvolvedor !!

Feche as ferramentas e o cursor deve responder imediatamente melhor.

Answer 4

Eu me inspirei da solução Korayem.

JavaScript:

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

CSS:

.busy * {
    cursor: wait !important;
}

Testado no Chrome, Firefox e IE 10. O cursor muda sem mover o mouse. "! IMPORTANTE" é necessário para o IE10.

EDIT: Você ainda precisa mover o cursor no IE 10 após a conclusão da solicitação do Ajax (para que o cursor normal apareça). Espere o cursor aparece sem mover o mouse ..

Answer 5

Primeiro de tudo, você deve estar ciente de que, se tiver um cursor designado para qualquer tag dentro do seu corpo, $('body').css('cursor', 'wait'); não mudará o cursor dessa tag (como eu, eu uso cursor: pointer; em toda a minha tag de âncora). Você pode querer olhar para minha solução para este problema em particular primeiro: Cursor Aguarde a chamada de Ajax

Para o problema de que o cursor é atualizado apenas quando o usuário move o mouse nos navegadores do Webkit, como outras pessoas disseram, não há solução real.

Dito isto, ainda há uma solução alternativa se você adicionar um girador CSS ao cursor atual dinamicamente. Esta não é uma solução perfeita, porque você não sabe ao certo o tamanho do cursor e se o spinner estiver posicionado corretamente.

CSS Spinner seguindo o cursor: Demonstração

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

Você precisará verificar se é um dispositivo de toque também var isTouchDevice = typeof window.ontouchstart !== 'undefined';

Em conclusão, é melhor você tentar adicionar sua página um spinner estático ou algo mais que mostra o processo de carregamento em vez de tentar fazê -lo com o cursor.

Answer 6

A solução de Korayem funciona para mim em 100% de casos no Chrome moderno, Safari, em 95% de casos no Firefox, mas não funciona na Opera e no IE.

Eu melhorei um pouco:

$('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;
}

Agora ele funciona em 100% de casos em Chrome, Safari, Firefox e Opera. Eu não sei o que fazer com o IE :(

Answer 7

Solução de trabalho no código e caixa

Algumas das outras soluções não funcionam em todas as circunstâncias. Podemos alcançar o resultado desejado com duas regras CSS:

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

.not-busy {
  cursor: auto;
}

O primeiro indica que estamos ocupados e se aplica a todos os elementos da página, tentando substituir outros estilos de cursor. O último se aplica apenas ao corpo da página e é usado simplesmente para forçar uma atualização da interface do usuário; Queremos que essa regra seja o mais específica possível e não precisa se aplicar a outros elementos da página.

Podemos então desencadear e terminar o estado ocupado da seguinte maneira:

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

Em resumo, embora tenhamos que mudar o estilo do cursor para atualizar o cursor, modificando diretamente document.body.style.cursor ou similar não tem o efeito pretendido, em alguns motores como o WebKit, até que o cursor seja movido. Usar classes para afetar a mudança é mais robusto. No entanto, para forçar com segurança a interface do usuário a atualizar (novamente, em alguns motores), precisamos adicionar outra classe. Parece que a remoção de classes é tratada de maneira diferente de adicioná -las.

Answer 8

Eu não acho que você poderá fazer isso.

No entanto, tente alterar a posição de rolagem; Pode ajudar.

Answer 9

Aqui está minha solução:

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

A partir do jQuery 1.9 você deve Ajaxstart e Ajaxstop para documentar. Eles funcionam bem para mim no Firefox. Não testaram em outros navegadores.

Em CSS:

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

Em JavaScript:

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

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

Answer 11

Tente usar o valor CSS correto para a propriedade Cursor:

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

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

Answer 12

Provavelmente é um bug no webkit; você deve Relate.

Answer 13

Eu não tentei isso, mas e se você criar uma div transparente que está absolutamente posicionada e preenche a viewport antes de alterar o CSS. Então, quando o CSS for alterado no corpo, remova a div. este poderia desencadear um evento de mouseover no corpo, que poderia Faça com que o cursor atualize para o valor mais recente do CSS.

Mais uma vez, não testei isso, mas vale a pena tentar.

Answer 14

Ei pessoal, eu tenho uma solução difícil que funciona em todos os navegadores. A suposição é a biblioteca Protoype é usada. Alguém também pode escrever isso como JavaScript simples. A solução é ter uma div em cima de tudo logo após a redefinição do cursor e agitá -la um pouco para fazer com que o cursor se mova. Isso é publicado no meu blog http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html.

Answer 15

$ ('*'). CSS ('cursor', 'espera'); trabalhará em todos os lugares da página, incluindo links