Cómo cambiar el cursor para esperar cuando se usa jQuery .load()

Question

Mientras se espera una respuesta de .load(), ¿hay alguna forma de cambiar el cursor al cursor ocupado/de espera?

Answer 1

Probar:

actualizado para trabajar con jQuery 1,8 +

$(document).ajaxStart(function() { 
    $(document.body).css({'cursor' : 'wait'}); 
}).ajaxStop(function() { 
    $(document.body).css({'cursor' : 'default'}); 
}); 

cambios cursor en cualquier inicio y al final ajax. Eso incluye .load().

probar los diferentes estilos de cursor aquí:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Answer 2

Cambie el CSS del cuerpo a cursor: progress.

Para hacer esto, simplemente haga una clase de "espera" con este CSS, y luego agregue/elimine la clase del cuerpo.

CSS:

.waiting { 
    cursor: progress; 
} 

Luego, en sus JS:

$('body').addClass('waiting'); 

puede eliminarlo posteriormente con .removeClass.

• https://developer.mozilla.org/en/CSS/cursor
• http://api.jquery.com/addClass/
• http://api.jquery.com/removeClass/

Answer 3

Puede utilizar esta:

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

antes de empezar la carga y el cambio una vez completado el cursor para auto

Answer 4

espero que esto ayude a

$("body").css('cursor','wait'); 
    //or 
    $("body").css('cursor','progress'); 

saludos

Answer 5

que probé los diversos métodos que he encontrado aquí y en otros lugares y decidimos hay demasiados errores en varios navegadores (o incluso configuraciones, como los usuarios de RDP/VNC/Terminal) al cambiar el cursor del mouse. Así que en vez terminé con esto:

Dentro de mi código de inicio de aplicaciones que se activa después documento listo:

// Make working follow the mouse 
    var working = $('#Working'); 
    $(document).mousemove(function(e) { 
     working.css({ 
      left: e.pageX + 20, 
      top: e.pageY 
     }); 
    }); 

    // Show working while AJAX requests are in progress 
    $(document).ajaxStart(function() { 
     working.show(); 
    }).ajaxStop(function() { 
     working.hide(); 
    }); 

Y hacia el final de mi HTML, justo en el interior del cuerpo tengo:

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div> 

Funciona muy parecido al cursor de la "carga de aplicaciones" en Windows, donde aún se obtiene el cursor normal, pero también se puede decir que algo está sucediendo. Esto es ideal en mi caso porque quiero que el usuario sienta que todavía puede hacer otras cosas mientras espera, ya que mi aplicación maneja muy bien hasta ahora (primeras etapas de prueba).

Mi archivo carga.gif es simplemente una rueca típica, unos 16x16 píxeles, por lo que no es demasiado molesto, pero obvio.

Answer 6

Tuve que modificar la elocuente respuesta anterior para trabajar con jQuery> 1.8.

$(document).ajaxStart(function() { 
    $(document.body).css({ 'cursor': 'wait' }) 
}); 
$(document).ajaxComplete(function() { 
    $(document.body).css({ 'cursor': 'default' }) 
}); 

Answer 7

no me gusta la solución que sólo tiene que añadir la propiedad CSS para la etiqueta de cuerpo: no va a funcionar si ya tiene un cursor asignado a su elemento. Al igual que yo, uso cursor: pointer; en todas mis etiquetas de anclaje. Por lo tanto, se me ocurrió con esta solución:

crear una clase CSS para evitar sobrescribir el cursor actual (para poder volver a la normalidad después)

.cursor-wait { 
    cursor: wait !important; 
} 

Crear las funciones para agregar y quitar el cursor

cursor_wait = function() 
{ 
    // switch to cursor wait for the current element over 
    var elements = $(':hover'); 
    if (elements.length) 
    { 
     // get the last element which is the one on top 
     elements.last().addClass('cursor-wait'); 
    } 
    // use .off() and a unique event name to avoid duplicates 
    $('html'). 
    off('mouseover.cursorwait'). 
    on('mouseover.cursorwait', function(e) 
    { 
     // switch to cursor wait for all elements you'll be over 
     $(e.target).addClass('cursor-wait'); 
    }); 
} 

remove_cursor_wait = function() 
{ 
    $('html').off('mouseover.cursorwait'); // remove event handler 
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default 
} 

a continuación, cree que su función ajax (no consumo eventos como ajaxStart o ajaxStop porque no quiero usar el cursor de espera con todo mi llamada AJAX)

get_results = function(){ 

    cursor_wait(); 

    $.ajax({ 
     type: "POST", 
     url: "myfile.php", 

     data: { var : something }, 

     success: function(data) 
     { 
      remove_cursor_wait(); 
     } 
    }); 
} 

No estoy muy familiarizado con la carga jQuery(), pero supongo que será algo como esto:

$('button').click(function() 
{ 
    cursor_wait(); 

    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr) 
    { 
     if (statusTxt == "success") 
     { remove_cursor_wait(); } 
    }); 
}); 

DEMO

espero que ayude!

Answer 8

Probar:

$(document).ajaxStart(function() { 
    $('body').css('cursor', 'wait'); 
}).ajaxStop(function() { 
    $('body').css('cursor', 'auto'); 
}); 

Como de jQuery 1.8, la .ajaxStop() y el .ajaxComplete() métodos sólo deben ser adjunto al documento.

Intercambiando .ajaxStop() con .ajaxComplete() ambos me dieron resultados satisfactorios.