wake-up-neo.com

Den Browser-Cursor von "Warten" nach "Automatisch" bewegen, ohne dass der Benutzer die Maus bewegt

Ich verwende diesen jQuery-Code, um den Mauszeiger während eines Ajax-Aufrufs auf den Status beschäftigt (Sanduhr) zu setzen.

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

und diesen entsprechenden Code, um es wieder normal zu machen ...

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

Das funktioniert gut ... auf einigen Browsern.

Bei Firefox und IE ändert sich der Mauszeiger, sobald der Befehl ausgeführt wird. Dies ist das Verhalten, das ich möchte.

In Chrome und Safari ändert sich der Mauszeiger nicht sichtbar von "beschäftigt" in "automatisch", bis der Benutzer den Zeiger bewegt.

Was ist der beste Weg, um die widerstrebenden Browser dazu zu bringen, den Mauszeiger zu wechseln?

67
Nosredna

Es ist im Moment ein Fehler in beiden Browsern. Weitere Details bei beiden Links (auch in Kommentaren):

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

und 

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

34
user213788

Ich würde es lieber so machen:

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

CSS:

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

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

38
Korayem

Ich glaube, dieses Problem (einschließlich des Mousedown-Problems) wurde in Chrome 50 behoben. 

Aber nur, wenn Sie die Entwicklerwerkzeuge nicht verwenden !!

Schließen Sie die Werkzeuge und der Cursor sollte sofort besser reagieren.

20
J. Allen

Ich wurde von der Lösung von Korayem inspiriert.

Javascript:

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

CSS:

.busy * {
    cursor: wait !important;
}

Getestet in Chrome, Firefox und IE 10. Der Cursor ändert sich, ohne die Maus zu bewegen. "! important" wird für IE10 benötigt.

Bearbeiten: Sie müssen den Cursor weiterhin auf IE 10 bewegen, nachdem die Anforderung AJAX abgeschlossen ist (der normale Cursor erscheint). Der Wait-Cursor erscheint, ohne die Maus zu bewegen.

7
Sergiu

Die Lösung von Korayem funktioniert für mich zu 100% in modernen Chrome, Safari und zu 95% in Firefox, jedoch nicht in Opera und IE.

Ich habe es etwas verbessert:

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

Jetzt funktioniert es in 100% der Fälle in Chrome, Safari, Firefox und Opera. Ich weiß nicht, was ich mit IE machen soll :(

1
Felix

Zuallererst sollten Sie wissen, dass $('body').css('cursor', 'wait'); den Cursor dieses Tags nicht ändert, wenn Sie einem Tag in Ihrem Körper einen Cursor zugewiesen haben (wie ich, ich verwende cursor: pointer; für alle meine Anker-Tags). Vielleicht möchten Sie sich zuerst meine Lösung für dieses bestimmte Problem ansehen: Cursor auf Ajax-Aufruf warten

Für das Problem, dass der Cursor erst aktualisiert wird, wenn der Benutzer die Maus in Webkit-Browsern bewegt, gibt es, wie andere Leute sagten, keine echte Lösung.

Allerdings gibt es immer noch eine Problemumgehung, wenn Sie dem aktuellen Cursor dynamisch einen CSS-Spinner hinzufügen. Dies ist keine perfekte Lösung, weil Sie nicht sicher wissen, wie groß der Cursor ist und ob der Spinner richtig positioniert ist.

CSS-Spinner nach dem Cursor: 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);

Sie müssen prüfen, ob es sich auch um ein Touch-Gerät handelt. var isTouchDevice = typeof window.ontouchstart !== 'undefined';

Abschließend versuchen Sie, auf Ihrer Seite einen statischen Spinner oder etwas anderes hinzuzufügen, das den Ladevorgang anzeigt, anstatt zu versuchen, dies mit dem Cursor zu tun.

1
pmrotule

Arbeitslösung für CodeSandbox

Einige der anderen Lösungen funktionieren nicht unter allen Umständen. Wir können das gewünschte Ergebnis mit zwei CSS-Regeln erreichen:

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

.not-busy {
  cursor: auto;
}

Ersteres zeigt an, dass wir beschäftigt sind und auf alle Elemente auf der Seite angewendet werden, um andere Cursor-Stile zu überschreiben. Letzteres gilt nur für den Seitentext und dient einfach dazu, eine Aktualisierung der Benutzeroberfläche zu erzwingen. Wir möchten, dass diese Regel so unspezifisch wie möglich ist und nicht auf andere Seitenelemente angewendet werden muss.

Wir können dann den Besetztzustand wie folgt auslösen und beenden:

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

Zusammenfassend lässt sich sagen, dass, obwohl wir den Cursorstil ändern müssen, um den Cursor zu aktualisieren, die Änderung von document.body.style.cursor oder ähnlichem auf einigen Engines wie Webkit nicht die beabsichtigte Wirkung hat, bis der Cursor verschoben wird. Die Verwendung von Klassen zur Änderung der Änderung ist robuster. Um jedoch die Aktualisierung der Benutzeroberfläche (wiederum bei einigen Engines) verlässlich zu erzwingen, müssen Sie eine weitere Klasse hinzufügen. Es scheint, dass das Entfernen von Klassen anders behandelt wird als das Hinzufügen von Klassen.

1
Ninjakannon

Ich glaube nicht, dass Sie es schaffen werden.

Versuchen Sie jedoch, die Bildlaufposition zu ändern. es könnte helfen.

0
SLaks

Ab jquery 1.9 solltest du ajaxStart und ajaxStop dokumentieren . Sie funktionieren gut für mich in Firefox. Habe nicht in anderen Browsern getestet.

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' ) } )
0
user1115652

HIER ist meine Lösung:

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

}
0
cestar