Modification du curseur sur l'attente dans javascript / jquery

Dans votre utilisation jQuery:

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

Puis revenir à la normale à nouveau

 $("body").css("cursor", "default"); 

Un collègue a suggéré une approche que je trouve préférable à la solution choisie ici. D'abord, dans CSS, ajoutez cette règle:

 body.waiting * { cursor: progress; } 

Ensuite, pour activer le curseur de progression, dites:

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

Et pour éteindre le curseur de progression, dis:

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

L'avantage de cette approche est que lorsque vous éteignez le curseur de progression, tous les autres curseurs ont été définis dans votre CSS seront restaurés. Si la règle CSS n'est pas assez puissante pour annuler d'autres règles CSS, vous pouvez ajouter un identifiant au corps et à la règle, ou utiliser !important .

Remplacer tout élément unique

 $("*").css("cursor", "progress"); 

Utilisation de jquery et css:

 $("#element").click(function(){ $(this).addClass("wait"); });​ 

HTML: <div id="element">Click and wait</div>​

CSS: .wait {cursor:wait}​

Démonstration ici

Vous n'avez pas besoin de JavaScript pour cela. Vous pouvez changer le curseur sur tout ce que vous voulez en utilisant CSS:

 selector { cursor: url(myimage.jpg), auto; } 

Consultez ici le support du navigateur car il existe des différences subtiles selon le navigateur

 $('#some_id').click(function() { $("body").css("cursor", "progress"); $.ajax({ url: "test.html", context: document.body, success: function() { $("body").css("cursor", "default"); } }); }); 

Cela créera un curseur de chargement jusqu'à ce que votre appel ajax réussisse.

Voici ma façon préférée, et changera le curseur chaque fois qu'une page est sur le point de changer, c'est-à-dire avant la charge

 $(window).on('beforeunload', function(){ $('*').css("cursor", "progress"); }); 

JQuery:
$("body").css("cursor", "progress");

de retour
$("body").css("cursor", "default");

Pur:
document.body.style.cursor = 'progress';

de retour
document.body.style.cursor = 'default';

Voici une autre chose intéressante que vous pouvez faire. Définissez une fonction à appeler juste avant chaque appel ajax. Assurez-vous également une fonction d'appel après chaque appel ajax est terminé. La première fonction définit le curseur d'attente et la seconde l'efface. Ils ressemblent à ce qui suit:

 $(document).ajaxComplete(function(event, request, settings) { $('*').css('cursor', 'default'); }); function waitCursor() { $('*').css('cursor', 'progress'); } 

Si vous économisez trop vite, essayez ceci:

 <style media="screen" type="text/css"> .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;} </style> <input type="button" value="Save" onclick="save();" />&nbsp; <span class="autosave" style="display: none;">Saved Successfully</span> $('span.autosave').fadeIn("80"); $('span.autosave').delay("400"); $('span.autosave').fadeOut("80");