jquery - puntero - Obtener el cursor del navegador de "esperar" a "automático" sin que el usuario mueva el mouse
javascript change cursor icon (14)
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?
$ (''*''). css (''cursor'', ''esperar''); funcionará en todas partes en la página incluyendo enlaces
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'' ) } )
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);
});
}
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.
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.
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
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 .
Intente usar el valor de css correcto para la propiedad del cursor:
$(''body'').css(''cursor'',''wait'');
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 :(
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 ...
No creo que puedas hacerlo.
Sin embargo, intente cambiar la posición de desplazamiento; podría ayudar.
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.
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/
Probablemente sea un error en WebKit; deberías reportarlo