javascript - setcontent - jquery espera el cursor mientras carga html en div
jquery set value element (8)
Quiero mostrarle al usuario un estado en el que se está cargando el resultado. ¿Cómo puedo cambiar el cursor o gif mientras cargo el resultado en div con $ MyDiv.load ("page.php")?
- Inicialmente, el estilo de la imagen de carga no es visible.
- Cambie el estilo a visible cuando comience a cargar.
- Cambie el estilo a no visible cuando finalice la carga utilizando un argumento de devolución de llamada para cargar ().
Ejemplo:
$("#loadImage").show();
$("#MyDiv").load("page.php", {limit: 25}, function(){
$("#loadImage").hide();
});
$("body").css("cursor", "progress");
Solo recuerda devolverlo después:
$MyDiv.load("page.php", function () {
// this is the callback function, called after the load is finished.
$("body").css("cursor", "auto");
});
Por ejemplo, si desea mostrar una imagen más grande al pasar el ratón 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");
});
}
Creo que lo mejor es configurarlo en el archivo css
body.wait *, body.wait {
cursor:wait !important;
}
y agregar / eliminar clase esperar en el cuerpo
este método anula todos los cursores en entradas, enlaces, etc.
$("*").css("cursor", "progress") funcionará sin importar en qué parte de la página está apuntando actualmente. De esta forma, no es necesario mover el cursor para verlo activado.
Un enfoque JQuery más limpio, 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) suponen una altura del 100% para el objeto visible más externo, por lo que el cursor ocupado solo se mostrará 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 creo que es una mejor solución usar solo una clase en el elemento del cuerpo
$(''body'').addClass(''cursorProgress'');
Y cuando quieras mantenerlo como antes, solo:
$(''body'').removeClass(''cursorProgress'');
y en tu archivo css pon algo así:
body.cursorProgress {
cursor: progress;
}
Por lo tanto, con esta solución no está anulando los valores predeterminados o los cambios que realiza en los estilos de cursor, y la segunda ventaja es que tiene la posibilidad de agregar lo importante en su CSS.
body.cursorProgress {
cursor: progress !important;
}
Eche un vistazo a mi solución, cubre todos los elementos, no solo la etiqueta corporal: https://.com/a/26183551/1895428