Obtenir le curseur du navigateur de « attendre » à « auto » sans que l'utilisateur en déplaçant la souris

Question

J'utilise ce code jQuery pour définir le pointeur de la souris sur son état occupé (sablier) lors d'un appel Ajax ...

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

et le code correspondant pour le mettre à la normale ...

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

Cela fonctionne bien ... sur certains navigateurs.

Firefox et IE, dès que j'exécuter la commande, le curseur de la souris. Ceci est le comportement que je veux.

Chrome et Safari, le curseur de la souris ne change pas visiblement « occupé » à « auto » jusqu'à ce que l'utilisateur déplace le pointeur.

Quelle est la meilleure façon d'obtenir les navigateurs réticents à changer le pointeur de la souris?

Answer 1

Il est un bogue dans les deux navigateurs pour le moment. Plus de détails sur les deux liens (dans les commentaires aussi bien):

http://code.google.com/p/chromium/ questions / détail? id = 26723

et

http://code.google.com/p/chromium/ questions / détail? id = 20717

Answer 2

Je préférerais le faire avec plus d'élégance 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 3

Je crois que cette question (y compris le problème mousedown) est maintenant fixé dans Chrome 50.

Mais seulement si vous n'utilisez les outils de développement !!

Fermer les outils et le curseur doit répondre immédiatement mieux.

Answer 4

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. Modifications du curseur sans déplacer la souris. "! Important" est nécessaire pour IE10.

Edit: Il vous reste à déplacer le curseur sur IE 10 après la requête AJAX est terminée (si le curseur apparaît normale). Attendre curseur apparaît sans déplacer la souris ..

Answer 5

Tout d'abord, vous devez savoir que si vous avez un curseur affecté à une balise dans votre corps, $('body').css('cursor', 'wait'); ne changera pas le curseur de cette balise (comme moi, j'utilise cursor: pointer; sur toute ma balise d'ancrage). Vous voudrez peut-être regarder ma solution à ce problème particulier d'abord: curseur attendre appel ajax

Pour le problème que le curseur est uniquement mis à jour une fois que l'utilisateur de déplacer la souris sur les navigateurs WebKit, comme d'autres personnes ont dit, il n'y a pas de solution réelle.

Cela étant dit, il y a encore une solution de contournement si vous ajoutez une fileuse css au curseur dynamique. Ce n'est pas une solution parfaite, car vous ne savez pas que la taille du curseur et si la fileuse soit correctement positionné.

spinner CSS suivant le curseur: DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

Vous devrez vérifier si elle est un appareil tactile ainsi var isTouchDevice = typeof window.ontouchstart !== 'undefined';

En conclusion, il vaut mieux essayer d'ajouter dans votre page un fileur statique ou quelque chose d'autre qui montre le processus de chargement au lieu d'essayer de le faire avec le curseur.

Answer 6

La solution de Korayem fonctionne pour moi dans 100% des cas dans Chrome moderne, Safari, dans 95% des cas dans Firefox, mais ne fonctionne pas dans Opera et IE.

J'amélioré un peu:

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

CSS:

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

html.notbusy, html.notbusy * {
    cursor: default !important;
}

Maintenant, il fonctionne dans 100% des cas dans Chrome, Safari, Firefox et Opera. Je ne sais pas quoi faire avec IE: (

Answer 7

solution de travail sur CodeSandbox

Certains des autres solutions ne fonctionnent pas dans toutes les circonstances. Nous pouvons obtenir le résultat souhaité avec deux règles CSS:

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

.not-busy {
  cursor: auto;
}

Le premier indique que nous sommes occupés et applique à tous les éléments sur la page, en essayant de passer outre d'autres styles de curseur. Ce dernier applique uniquement au corps de la page et est utilisé simplement pour forcer une mise à jour de l'interface utilisateur; nous voulons que cette règle soit aussi non spécifique que possible et il n'a pas besoin d'appliquer à d'autres éléments de la page.

On peut alors déclencher et mettre fin à l'état occupé comme suit:

function onBusyStart() {
    document.body.classList.add('busy');
    document.body.classList.remove('not-busy');
}

function onBusyEnd() {
    document.body.classList.remove('busy');
    document.body.classList.add('not-busy');
}

En résumé, bien que nous devons changer le style du curseur pour mettre à jour le curseur, modifier directement document.body.style.cursor ou similaire n'a pas l'effet escompté, sur certains moteurs tels que Webkit, jusqu'à ce que le curseur se déplace. L'utilisation de classes d'affecter le changement est plus robuste. Toutefois, afin de forcer de manière fiable l'interface utilisateur de mettre à jour (encore une fois, sur certains moteurs), il faut ajouter une autre classe. Il semble enlever les classes est traitée différemment de les ajouter.

Answer 8

Je ne pense pas que vous serez en mesure de le faire.

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

Answer 9

Voici ma solution:

function yourFunc(){

$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
 .mouseXPos(e.pageX + 1)
 .mouseYPos(e.pageX - 1);
});

}

Answer 10

Au jquery 1.9 vous devrait ajaxStart et ajaxStop de documenter . Ils fonctionnent très bien pour moi dans Firefox. Je n'ai pas testé dans d'autres navigateurs.

CSS:

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

En javaScript:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

Answer 11

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

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

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

Answer 12

Il est probablement un bogue dans WebKit; vous devez signaler .

Answer 13

Je ne l'ai pas essayé, mais qu'en est-si vous créez un div transparent qui est tout à fait en place et remplit la fenêtre juste avant de changer le CSS. Ensuite, lorsque le css est changé sur le corps, retirez la div. Cette peut déclencher un événement mouseover sur le corps, qui peut , le curseur à jour à la dernière valeur CSS.

Encore une fois, je ne l'ai pas testé, mais il vaut le coup.

Answer 14

Hé les gars, j'ai une solution de Nitty Gritty qui fonctionne sur tous les navigateurs. Assomption est une bibliothèque de protoype est utilisé. Quelqu'un peut-il écrire cela aussi clair aussi Javascript. La solution est d'avoir un div au-dessus de tout juste après la réinitialisation du curseur et secouez un peu pour que le curseur de se déplacer. Ceci est publié dans mon blog http://arunmobc.blogspot.com /2011/02/cursor-not-changing-issue.html.

Answer 15

$ ( '*') css ( 'curseur', 'attendre'). sera partout travailler sur la page, y compris les liens