Obtention du curseur de navigateur de "wait" à "auto" sans que l'utilisateur ne déplace la souris

Question

J'ai utiliser ce code jQuery pour définir le pointeur de la souris à son état occupé (sablier) pendant un appel Ajax...

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

et ce code correspondant à revenir à la normale...

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

Cela fonctionne très bien... sur certains navigateurs.

Sur Firefox et IE, dès que j'ai l'exécution de la commande, le curseur de la souris change. C'est le comportement que je veux.

Sur Chrome et Safari, le curseur de la souris n'a visiblement pas changer de "occupé" à "auto" jusqu'à ce que l'utilisateur déplace le pointeur.

Quelle est la meilleure façon d'obtenir la réticence des navigateurs pour passer le pointeur de la souris?

Answer 1

Je préférerais le faire plus élégamment comme ceci:

 $(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});
 

CSS:

 html.busy, html.busy * {  
  cursor: wait !important;  
}  
 

Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/

Answer 2

C'est un bug dans les deux navigateurs pour le moment. Plus de détails sur les deux liens (dans les commentaires également):

http://code.google.com/p/chromium/issues/detail?id=26723

et

http://code.google.com/p/chromium/issues/detail?id=20717

Answer 3

Je me suis inspiré de la solution Korayem.

Javascript:

 jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
}
    complete: function() {
       $('body').removeClass('busy');
}
 

CSS:

 .busy * {
    cursor: wait !important;
}
 

Testé sur Chrome, Firefox et IE 10. Le curseur change sans déplacer la souris. "! important" est nécessaire pour IE10.

Edit: vous devez toujours déplacer le curseur sur IE 10 une fois la demande AJAX terminée (le curseur normal apparaît). Attendez que le curseur apparaisse sans déplacer la souris.

Answer 4

Je ne pense pas que vous serez capable de le faire.

Cependant, essayez de changer la position du défilement; cela pourrait aider.

Answer 5

Essayez d’utiliser la valeur css correcte pour la propriété du curseur:

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

http://www.w3schools.com/CSS/pr_class_cursor.asp