Conseguir el cursor del navegador de “esperar” a “automático” sin que el usuario mueve el ratón

Question

Yo uso este código jQuery para establecer el puntero del ratón a su estado ocupados (reloj de arena) durante una llamada Ajax ...

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

y el código correspondiente a la volvió a la normalidad ...

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

Esto funciona bien ... en algunos navegadores.

En Firefox e IE, tan pronto como ejecutar el comando, el cursor del ratón. Este es el comportamiento que quiero.

En Chrome y Safari, el cursor del ratón no cambia visiblemente de "ocupado" en "auto" hasta que el usuario mueve el puntero.

¿Cuál es la mejor manera de conseguir los navegadores reacios a cambiar el puntero del ratón?

Answer 1

Es un error en ambos navegadores en este momento. Más detalles en ambos enlaces (en los comentarios), así:

http://code.google.com/p/chromium/ temas / detalle? id = 26723

y

http://code.google.com/p/chromium/ temas / detalle? id = 20717

Answer 2

Yo prefiero hacerlo más elegante de esta manera:

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

Answer 3

Creo que esta cuestión (incluido el problema mousedown) se ha fijado ahora en Chrome 50.

Pero sólo si no está utilizando las herramientas de desarrollo !!

Cierre las herramientas y el cursor inmediatamente debe responder mejor.

Answer 4

Me inspiré de la solución 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. cursor cambia sin mover el ratón. "! Important" es necesaria para IE10.

Editar: Usted todavía tiene que mover el cursor en IE 10 después de la petición AJAX es completa (aparece el cursor de modo normal). Espere cursor aparece sin mover el ratón ..

Answer 5

En primer lugar, se debe tener en cuenta que si usted tiene un cursor asignado a cualquier etiqueta dentro de su cuerpo, $('body').css('cursor', 'wait'); no va a cambiar el cursor de esa etiqueta (como yo, yo uso cursor: pointer; en toda mi etiqueta de anclaje). Es posible que desee mirar a mi solución a este problema en particular en primer lugar: cursor de espera para Ajax llamada

Para el problema de que el cursor sólo se actualiza una vez que el usuario mueva el ratón en los navegadores WebKit, como decían los demás, no hay ninguna solución real.

Una vez dicho esto, todavía existe una solución si se agrega una ruleta css a la actual del cursor de forma dinámica. Esto no es una solución perfecta, porque no se sabe con certeza el tamaño del cursor y si el spinner Se lo colocará 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);

Se tendrá que comprobar si se trata de un dispositivo táctil, así var isTouchDevice = typeof window.ontouchstart !== 'undefined';

En conclusión, es mejor que intenta agregar en su página de un control de giro estática u otra cosa que muestra el proceso de carga en lugar de intentar hacerlo con el cursor.

Answer 6

solución

de Korayem funciona para mí en 100% de los casos en Chrome moderna, Safari, en los casos del 95% en Firefox, pero no funciona en Opera e IE.

he mejorado 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% de los casos en Chrome, Safari, Firefox y Opera. No sé qué hacer con IE: (

Answer 7

solución en CodeSandbox

Trabajo

Algunas de las otras soluciones no funcionan en todas las circunstancias. Podemos lograr el resultado deseado con dos reglas CSS:

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

.not-busy {
  cursor: auto;
}

La primera indica que estamos ocupados y se aplica a todos los elementos de la página, en un intento de anular otros estilos de cursor. Este último sólo se aplica al cuerpo de la página y se utiliza simplemente para forzar una actualización de la interfaz de usuario; queremos que esta regla sea como no específica como sea posible y que no tiene por qué aplicarse a otros elementos de la página.

A continuación, puede desencadenar y poner fin al estado de ocupado de la siguiente manera:

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

En resumen, a pesar de que tenemos que cambiar el estilo del cursor para actualizar el cursor, modificando directamente document.body.style.cursor o similar, no tiene el efecto deseado, en algunos motores como Webkit, hasta que el cursor se mueve. Utilización de las clases para afectar el cambio es más robusto. Sin embargo, con el fin de forzar de forma fiable la interfaz de usuario para actualizar (de nuevo, en algunos motores), hay que añadir otra clase. Parece eliminación de las clases es tratado de manera diferente de la suma de ellos.

Answer 8

No creo que usted será capaz de hacerlo.

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

Answer 9

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 10

A partir de jQuery 1.9 debe ajaxStart y ajaxStop para documentar . Ellos trabajan muy bien para mí en Firefox. No se han 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 11

Trate de usar el valor CSS correcto para la propiedad cursor:

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

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

Answer 12

Es probablemente un error en WebKit; usted debe reportarlo .

Answer 13

No he probado esto, pero ¿qué pasa si se crea un div transparente que se coloca y absolutamente llena la ventana justo antes de cambiar el CSS. Entonces, cuando se cambia el css en el cuerpo, eliminar el div. Este podría desencadenar un evento al pasar el ratón sobre el cuerpo, que podría que el cursor se actualizará con el valor más reciente CSS.

Una vez más, no he probado esto, pero vale la pena un tiro.

Answer 14

Hola chicos, tengo una solución quid de la cuestión, que funciona en todos los navegadores. Suposición es se utiliza biblioteca de prototipo muy. Alguien puede escribir esto tan claro Javascript también. La solución es tener un div en la parte superior de todo sólo después de restablecer el cursor y lo agita un poco para hacer que el cursor se mueva. Esto se publicó en mi blog http://arunmobc.blogspot.com /2011/02/cursor-not-changing-issue.html.

Answer 15

.

$ ( '*') css ( 'cursor', 'espera'); funcione en todas partes de la página que incluye enlaces