Quiero mostrarle al usuario un estado que indica que el resultado se está cargando. ¿Cómo puedo cambiar el cursor o el gif mientras se carga el resultado en div con $ MyDiv.load ("page.php")?jquery espera cursor mientras se carga html en div
Ejemplo:
$("#loadImage").show();
$("#MyDiv").load("page.php", {limit: 25}, function(){
$("#loadImage").hide();
});
$("body").css("cursor", "progress");
Sólo recuerde para devolverlo después:
$MyDiv.load("page.php", function() {
// this is the callback function, called after the load is finished.
$("body").css("cursor", "auto");
});
esto no funcionaba en mi sitio, pero $ ("*") CSS ("cursor" , "progreso") hizo – Bryan
hmm ... este enfoque tiene un efecto secundario negativo ... estableciendo $ ('*').css ('cursor', 'auto') elimina cualquier cursor especial que haya configurado en los elementos de la página. ¡no es bueno! – ekkis
@ekkis ¿Conoces una alternativa? – k0pernikus
$("*").css("cursor", "progress") funcionará sin importar en qué parte de la página que está apuntando actualmente. De esta forma, no es necesario mover el cursor para verlo activado.
nice pero no funciona en Chrome (http://code.google.com/p/chromium/issues/detail?id=26723) –
funciona en Chrome ahora – Bryan
¡yikes! ese enfoque es defectuoso. borra las asignaciones del cursor a todo en la página. – commonpike
Creo que lo mejor es configurar en el archivo css
body.wait *, body.wait {
cursor:wait !important;
}
y añadir/eliminar espera de clase en el cuerpo
este método, se sustituye todos los cursores en los insumos, enlaces, etc.
Me gusta el enfoque, pero no funcionó en el enfoque de IE 9. mountain de '$ ('*'). Css ('cursor', ...)' hizo aunque – ekkis
¡yikes! ese enfoque es defectuoso. borra las asignaciones del cursor a todo en la página – ekkis
Esta es realmente la mejor solución de navegador cruzado - probado. después de eliminar la clase de espera, CSS volverá en cascada a lo que el cursor se configuró sin tener que ponerlo por defecto como otras soluciones. Thx Marmot. @ekkis deberías probarlo de nuevo. funciona en IE9. –
Para ejemplo, si desea mostrar una imagen más grande al pasar el cursor sobre una miniatura
//Hovered image
$("a.preview").hover(function(e) {
var aprev = this;
//Show progress cursor while loading image
$(aprev).css("cursor", "progress");
//#imgpreview is the <div> to be loaded on hover
$("#imgpreview").load(function() {
$(aprev).css("cursor", "default");
});
}
A El enfoque de JQuery, aunque no necesariamente eficiente, es agregar y eliminar una clase ocupada a todos los objetos.
Tenga en cuenta que no todos los navegadores (por ejemplo Firefox) asumen una altura de 100% para el objeto visible más externa, por lo que el cursor ocupado sólo se conseguirá que aparece en la parte de la pantalla
<head runat="server">
<title></title>
<style type="text/css">
.busy
{
cursor: wait !important;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#btnToggleWait").click(function (e) {
if ($(e.target).hasClass("busy")) {
$("*").removeClass("busy");
}
else {
$("*").addClass("busy");
}
e.preventDefault();
e.stopPropagation();
return false;
});
});
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btnToggleWait">
Toggle Wait</button>
</div>
</form>
</body>
Realmente pienso que es una solución mejor utilizar sólo una clase en el elemento del cuerpo
$('body').addClass('cursorProgress');
Y cuando se quiere mantenerla como lo era antes simplemente:
$('body').removeClass('cursorProgress');
y en vosotros CSS archivo de poner algo así:
body.cursorProgress {
cursor: progress;
}
Así que con esta solución no se anulan los valores predeterminados o cambios que realice en los estilos de cursor, y la segunda ventaja es que usted tiene la posibilidad de añadir lo importante en tu css.
body.cursorProgress {
cursor: progress !important;
}
Tenga una mirada en mi solución, que cubre todos los elementos, no sólo el cuerpo de la etiqueta:. https://stackoverflow.com/a/26183551/1895428
Para crear realmente el gif de carga, visita http://www.ajaxload.info/ donde puedes personaliza uno y guárdalo. – Darwyn