jquery - puntero - Obtener el cursor del navegador de "esperar" a "automático" sin que el usuario mueva el mouse

javascript change cursor icon

Question

Uso este código jQuery para configurar el puntero del mouse (ratón) en su estado ocupado (reloj de arena) durante una llamada Ajax ...

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

y este código correspondiente para restablecerlo a la normalidad ...

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

Esto funciona bien ... en algunos navegadores.

En Firefox e IE, tan pronto como ejecuto el comando, el cursor del mouse cambia. Este es el comportamiento que quiero.

En Chrome y Safari, el cursor del mouse no cambia visiblemente de "ocupado" a "automático" hasta que el usuario mueva el puntero.

¿Cuál es la mejor manera de hacer que los navegadores reacios cambien el puntero del mouse?

Answer 1

$ (''*''). css (''cursor'', ''esperar''); funcionará en todas partes en la página incluyendo enlaces

Answer 2

A partir de jquery 1.9, debe ajaxStart y ajaxDetener para documentar . Funcionan bien para mí en Firefox. No lo he probado en otros navegadores.

En CSS:

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

En javaScript:

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

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

Answer 3

AQUÍ está mi solución:

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 4

Antes que nada, debes tener en cuenta que si tienes un cursor asignado a cualquier etiqueta dentro de tu cuerpo, $(''body'').css(''cursor'', ''wait''); no cambiará el cursor de esa etiqueta (como yo, uso cursor: pointer; en todas las etiquetas de anclaje). Es posible que desee ver mi solución a este problema en particular primero: el cursor espera la llamada ajax

Para el problema de que el cursor solo se actualiza una vez que el usuario mueve el mouse en los navegadores webkit, como dijeron otras personas, no hay una solución real.

Dicho esto, todavía hay una solución alternativa si agrega un spinner css al cursor actual de forma dinámica. Esta no es una solución perfecta porque no se sabe con certeza el tamaño del cursor y si la ruleta se posicionará correctamente.

CSS spinner siguiendo el cursor: 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);

También deberá verificar si se trata de un dispositivo táctil var isTouchDevice = typeof window.ontouchstart !== ''undefined'';

En conclusión, es mejor que intente agregar en su página un spinner estático u otra cosa que muestre el proceso de carga en lugar de intentar hacerlo con el cursor.

Answer 5

Creo que este problema (incluido el problema de mousedown) ahora está arreglado en Chrome 50.

¡Pero solo si no estás usando las herramientas de desarrollador!

Cierre las herramientas y el cursor debería responder mejor de inmediato.

Answer 6

Es un error en ambos navegadores en este momento. Más detalles en ambos enlaces (en comentarios también):

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

y

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

Answer 7

Hola chicos, tengo una solución esencial que funciona en todos los navegadores. La suposición es que se usa la biblioteca de prototipos. Alguien puede escribir esto como Javascript simple también. La solución es tener un div encima de todos justo después de restablecer el cursor y agitarlo un poco para hacer que el cursor se mueva. Esto se publica en mi blog http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html .

Answer 8

Intente usar el valor de css correcto para la propiedad del cursor:

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

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

Answer 9

La solución de Korayem funciona para mí en un 100% de casos en Chrome moderna, Safari, en un 95% de casos en Firefox, pero no funciona en Opera e IE.

Lo mejoré un poco:

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

Ahora funciona en 100% casos en Chrome, Safari, Firefox y Opera. No sé qué hacer con IE :(

Answer 10

Me inspiré en la solución de Korayem.

Javascript:

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

CSS:

.busy * {
    cursor: wait !important;
}

Probado en Chrome, Firefox e IE 10. El cursor cambia sin mover el mouse. "! important" es necesario para IE10.

Editar: Todavía tiene que mover el cursor en IE 10 después de que se complete la solicitud AJAX (para que aparezca el cursor normal). El cursor de espera aparece sin mover el mouse ...

Answer 11

No creo que puedas hacerlo.

Sin embargo, intente cambiar la posición de desplazamiento; podría ayudar.

Answer 12

No he intentado esto, pero ¿qué tal si creas un div transparente que está absolutamente posicionado y llena la ventana gráfica justo antes de cambiar el CSS? Luego, cuando se cambia el CSS en el cuerpo, elimina el div. Esto podría desencadenar un evento mouseover en el cuerpo, lo que podría hacer que el cursor se actualice al último valor de CSS.

De nuevo, no lo he probado, pero vale la pena intentarlo.

Answer 13

Prefiero hacerlo de forma más elegante así:

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

CSS:

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

Fuente: http://postpostmodern.com/instructional/global-ajax-cursor-change/

Answer 14

Probablemente sea un error en WebKit; deberías reportarlo