Desidero mostrare all'utente uno stato che il risultato sta caricando. Come posso cambiare cursore o gif mentre carico il risultato in div con $ MyDiv.load ("page.php")?jquery attende il cursore durante il caricamento di html in div
Esempio:
$("#loadImage").show();
$("#MyDiv").load("page.php", {limit: 25}, function(){
$("#loadImage").hide();
});
$("body").css("cursor", "progress");
Basta ricordarsi di restituirlo dopo:
$MyDiv.load("page.php", function() {
// this is the callback function, called after the load is finished.
$("body").css("cursor", "auto");
});
questo non ha funzionato sul mio sito, ma $ ("*") css ("cursore" , "progresso") ha fatto – Bryan
hmm ... questo approccio ha un effetto collaterale negativo ... impostazione $ ('*').css ('cursor', 'auto') cancella tutti i cursori speciali che potresti aver impostato sugli elementi nella pagina. non buono! – ekkis
@ekkis Conosci un'alternativa? – k0pernikus
$("*").css("cursor", "progress") funzionerà non importa dove sulla pagina che si sta puntando. In questo modo non devi spostare il cursore per vederlo attivato.
bello ma non funziona in Chrome (http://code.google.com/p/chromium/issues/detail?id=26723) –
funziona in cromo ora – Bryan
yikes! quell'approccio è difettoso. cancella le assegnazioni del cursore a tutto ciò che si trova sulla pagina. – commonpike
penso che il migliore è quello di istituire in file css
body.wait *, body.wait {
cursor:wait !important;
}
e aggiungere/rimuovere classe di attesa in corpo
questo metodo sovrascrive tutti i cursori di input, link ecc
Mi piace l'approccio ma non ha funzionato su IE 9. L'approccio di montagna di $ ('*'). Css ('cursor', ...) 'ha funzionato anche se – ekkis
yikes! quell'approccio è difettoso. cancella le assegnazioni del cursore a qualsiasi cosa nella pagina – ekkis
Questa è in realtà la migliore soluzione per browser incrociati: testata. dopo aver rimosso la classe wait, il CSS tornerà a cascata a ciò che il cursore è stato impostato senza impostarlo come altre soluzioni. Thx Marmot. @ekkis dovresti testarlo di nuovo. funziona in IE9. –
Per esempio, se desideri mostrare un'immagine più grande al passaggio del mouse su 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 cle approccio di JQuery, anche se non necessariamente efficiente è quello di aggiungere e rimuovere una classe occupata a tutti gli oggetti.
Si noti che, non tutti i browser (ad esempio Firefox) assumere un'altezza di 100% per l'oggetto visualizzabile più esterno, in modo che il cursore di occupato otterrà visualizzata solo sulla parte dello schermo
<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>
credo davvero che si tratta di una soluzione migliore di utilizzare solo una classe nell'elemento corpo
$('body').addClass('cursorProgress');
E quando si desidera mantenere come era prima solo:
$('body').removeClass('cursorProgress');
e in voi CSS file di mettere qualcosa di simile:
body.cursorProgress {
cursor: progress;
}
Quindi, con questa soluzione che non abbiano la prevalenza le impostazioni predefinite o le modifiche apportate sugli stili del cursore, e il secondo vantaggio è che si ha la possibilità di aggiungere l'importante nel tuo css.
body.cursorProgress {
cursor: progress !important;
}
Dai un'occhiata alla mia soluzione, che copre tutti gli elementi, non solo il corpo tag:. https://stackoverflow.com/a/26183551/1895428
Per creare effettivamente la gif di caricamento, controlla http://www.ajaxload.info/ dove puoi personalizzarne uno e salvarlo. – Darwyn