Ottenere il cursore del browser da “aspettare” per “auto” senza che l'utente spostando il mouse

Question

Io uso questo codice jQuery per impostare il puntatore del mouse al suo stato occupato (clessidra) durante una chiamata Ajax ...

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

e il codice corrispondente per riportarlo alla normalità ...

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

Questo funziona bene ... su alcuni browser.

Su Firefox e IE, non appena ho eseguire il comando, il cursore del mouse. Questo è il comportamento che voglio.

Su Chrome e Safari, il cursore del mouse non visibilmente cambia da "occupato" per "auto" fino a quando l'utente sposta il puntatore.

Qual è il modo migliore per ottenere i browser riluttanti a passare il puntatore del mouse?

Answer 1

Si tratta di un bug in entrambi i browser al momento. Maggiori dettagli su entrambi i collegamenti (nei commenti così):

http://code.google.com/p/chromium/ problemi / dettaglio? id = 26723

e

http://code.google.com/p/chromium/ problemi / dettaglio? id = 20717

Answer 2

Io preferirei farlo più elegante in questo modo:

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

CSS:

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

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

Answer 3

Credo che questo problema (compreso il problema mousedown) è stato corretto in Chrome 50.

Ma solo se non si sta utilizzando gli strumenti di sviluppo !!

Chiudere gli strumenti e il cursore deve immediatamente rispondere meglio.

Answer 4

Mi sono ispirato dalla soluzione Korayem.

Javascript:

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

CSS:

.busy * {
    cursor: wait !important;
}

Testato su Chrome, Firefox e IE 10. cursore senza spostare il mouse. "! Important" è necessario per IE10.

Edit: Hai ancora per muovere il cursore su IE 10 dopo la richiesta AJAX è completa (compare in modo che il cursore normale). Attendere cursore appare senza muovere il mouse ..

Answer 5

Prima di tutto, si deve essere consapevoli che se si dispone di un cursore assegnato a un tag all'interno del vostro corpo, $('body').css('cursor', 'wait'); non cambierà il cursore di quel tag (come me, io uso cursor: pointer; su tutti i miei tag di ancoraggio). Si potrebbe desiderare di guardare la mia soluzione a questo particolare problema in primo luogo: cursore di attesa per l'Ajax chiamata

Per il problema che il cursore viene aggiornato solo una volta che l'utente sposta il mouse sul browser WebKit, come altre persone hanno detto, non c'è una vera soluzione.

Detto questo, c'è ancora una soluzione se si aggiunge un filatore CSS al corrente del cursore in modo dinamico. Questa non è una soluzione perfetta, perché non si sa per certo la dimensione del cursore e se il filatore verrà posizionato in modo corretto.

filatore CSS segue il cursore: 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);

Sarà necessario verificare se si tratta di un dispositivo touch così var isTouchDevice = typeof window.ontouchstart !== 'undefined';

In conclusione, è meglio tenta di aggiungere nella tua pagina di una filatrice statica o qualcos'altro che mostra il processo di caricamento invece di cercare di farlo con il cursore.

Answer 6

soluzione

di Korayem funziona per me in 100% dei casi in Chrome moderna, Safari, nel 95% dei casi in Firefox, ma non funziona in Opera e IE.

ho migliorato un po ':

$('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;
}

Ora funziona in 100% dei casi in Chrome, Safari, Firefox e Opera. Non so cosa fare con IE: (

Answer 7

soluzione sul CodeSandbox

Lavorare

Alcune delle altre soluzioni non funzionano in tutte le circostanze. Siamo in grado di ottenere il risultato desiderato con due regole CSS:

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

.not-busy {
  cursor: auto;
}

Il primo indica che siamo impegnati e si applica a tutti gli elementi della pagina, cercando di ignorare altri stili del cursore. Quest'ultima si applica solo al corpo della pagina e viene usato semplicemente per forzare un aggiornamento UI; vogliamo che questa regola sia come non-specifici possibile e non ha bisogno di applicare ad altri elementi della pagina.

Si può quindi innescare e porre fine allo stato occupato nel seguente modo:

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');
}

In sintesi, anche se dobbiamo cambiare lo stile cursore per aggiornare il cursore, modificando direttamente document.body.style.cursor o simile non ha l'effetto desiderato, in alcuni motori come Webkit, fino a quando il cursore viene spostato. Utilizzando le classi di influenzare il cambiamento è più robusto. Tuttavia, al fine di costringere in modo affidabile l'interfaccia utente per l'aggiornamento (ancora una volta, su alcuni motori), dobbiamo aggiungere un'altra classe. Sembra la rimozione di classi viene trattato in modo diverso da aggiungere loro.

Answer 8

Non credo che sarete in grado di farlo.

Tuttavia, provare a cambiare la posizione di scorrimento; potrebbe essere utile.

Answer 9

Questa è la mia soluzione:

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

Come di jQuery 1.9 dovrebbe ajaxStart e ajaxStop documentare . Funzionano bene per me in Firefox. Non hanno testato in altri browser.

In CSS:

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

in Javascript:

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

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

Answer 11

Provare a utilizzare il valore CSS corretto per la proprietà cursor:

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

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

Answer 12

E 'probabilmente un bug in WebKit; si dovrebbe segnalarlo .

Answer 13

Non ho provato questo, ma che dire se si crea un div trasparente che viene posizionato in modo assoluto e riempie la finestra poco prima di cambiare il CSS. Poi, quando il css viene modificato sul corpo, rimuovere il div. Questo potrebbe attivare un evento mouseover sul corpo, che potrebbe , il cursore per aggiornare all'ultima valore di CSS.

Ancora una volta, non ho ancora testato questo, ma vale la pena un colpo.

Answer 14

Ciao ragazzi, ho una soluzione Nitty Gritty che funziona su tutti i browser. Assunta è la libreria prototipo viene utilizzato. Qualcuno può scrivere questo come semplice Javascript troppo. La soluzione è quella di avere un div in cima a tutto solo dopo aver reimpostato il cursore e agita un po 'per causare il cursore per muoversi. Questo è pubblicato nel mio blog http://arunmobc.blogspot.com /2011/02/cursor-not-changing-issue.html.

Answer 15

.

$ ( '*') css ( 'cursore', 'aspettare'); lavorerà ovunque sulla pagina compresi i collegamenti