Den Browser -Cursor von "Warten" zu "Auto" erhalten, ohne dass der Benutzer die Maus bewegen

Question

Ich benutze diesen JQuery -Code, um den Mauszeiger während eines Ajax -Anrufs auf seinen geschäftigen Zustand (Sanduhr) zu setzen ...

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

und dieser entsprechende Code, um ihn wieder auf Normal zu setzen ...

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

Das funktioniert gut ... auf einigen Browsern.

Auf Firefox und dh, sobald ich den Befehl ausführte, ändert sich der Maus -Cursor. Dies ist das Verhalten, das ich will.

Bei Chrome und Safari ändert sich der Mauszeiger nicht sichtbar von "geschäftig" zu "automatisch", bis der Benutzer den Zeiger bewegt.

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

Answer 1

Es ist momentan 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

Answer 2

Ich würde es lieber eleganter machen wie so:

$(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/

Answer 3

Ich glaube, dieses Problem (einschließlich des Problems der MouseDown) ist jetzt in Chrome 50 behoben.

Aber nur wenn Sie die Entwickler -Tools nicht verwenden !!

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

Answer 4

Ich habe mich von der Korayem -Lösung inspirieren lassen.

JavaScript:

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

CSS:

.busy * {
    cursor: wait !important;
}

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

Bearbeiten: Sie müssen den Cursor noch auf IE 10 verschieben, nachdem die AJAX -Anforderung abgeschlossen ist (so dass der normale Cursor angezeigt wird). Wait Cursor erscheint, ohne die Maus zu bewegen.

Answer 5

Zunächst sollten Sie sich bewusst sein, dass wenn Sie einen Cursor in Ihrem Körper zugewiesen haben. $('body').css('cursor', 'wait'); werde den Cursor dieses Tags nicht ändern (wie ich, ich benutze ich cursor: pointer; auf all meinem Anker -Tag). Vielleicht möchten Sie sich zuerst meine Lösung für dieses spezielle Problem ansehen: Cursor wartet auf Ajax Call

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

Davon abgesehen gibt es immer noch eine Problemumgehung, wenn Sie dem aktuellen Cursor einen CSS -Spinner dynamisch hinzufügen. Dies ist keine perfekte Lösung, da Sie die Größe des Cursors nicht sicher wissen und der Spinner korrekt positioniert ist.

CSS -Spinner folgt 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 überprüfen, ob es sich auch um ein Touch -Gerät handelt var isTouchDevice = typeof window.ontouchstart !== 'undefined';

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

Answer 6

Korayems Lösung funktioniert für mich in 100% Fällen in modernen Chrom, Safari, in 95% Fällen in Firefox, funktioniert jedoch nicht in der Oper und dh.

Ich habe es ein bisschen 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% Fällen in Chrome, Safari, Firefox und Oper. Ich weiß nicht, was ich mit IE machen soll :(

Answer 7

Arbeitslösung auf Codesandbox

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

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

.not-busy {
  cursor: auto;
}

Ersteres gibt an, dass wir beschäftigt sind und für alle Elemente auf der Seite gilt und versuchen, andere Cursorstile zu überschreiben. Letzteres gilt nur für den Seitenkörper und wird einfach verwendet, um ein UI -Update zu erzwingen. Wir möchten, dass diese Regel so unspezifisch wie möglich ist und nicht für andere Seitenelemente gelten muss.

Wir können dann den geschäftigen Zustand 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 müssen wir den Cursorstil ändern, um den Cursor direkt zu aktualisieren, und modifizieren Sie direkt document.body.style.cursor oder ähnliches hat nicht den beabsichtigten Effekt auf einige Motoren wie Webkit, bis der Cursor verschoben ist. Die Verwendung von Klassen, um die Änderung zu beeinflussen, ist robuster. Um die Benutzeroberfläche zuverlässig zum Aktualisieren zu zwingen (wieder in einigen Motoren), müssen wir eine andere Klasse hinzufügen. Es scheint, dass das Entfernen von Klassen unterschiedlich behandelt wird als hinzugefügt.

Answer 8

Ich glaube nicht, dass Sie es schaffen können.

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

Answer 9

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

}

Answer 10

Ab JQuery 1.9 Sie Sollte Ajaxstart und Ajaxstop dokumentieren. Sie arbeiten gut für mich in Firefox. In anderen Browsern nicht getestet haben.

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

Versuchen Sie, den richtigen CSS -Wert für die Cursor -Eigenschaft zu verwenden:

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

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

Answer 12

Es ist wahrscheinlich ein Fehler in Webkit. Du solltest Berichte Es.

Answer 13

Ich habe das nicht ausprobiert, aber was ist, wenn Sie ein transparentes Div erstellen, das absolut positioniert ist, und das Ansichtsfenster kurz vor dem Wechseln des CSS ausfüllt. Dann, wenn das CSS am Körper geändert wird, entfernen Sie die Div. Dies könnte ein Mausover -Ereignis auf dem Körper auslösen, das könnte Lassen Sie den Cursor den neuesten CSS -Wert aktualisieren.

Ich habe das wieder nicht getestet, aber es ist einen Schuss wert.

Answer 14

Hey Leute, ich habe eine düstere Lösung, die auf allen Browsern funktioniert. Annahme ist eine Protoype -Bibliothek wird verwendet. Jemand kann dies auch als einfaches JavaScript schreiben. Die Lösung besteht darin, einen Div über alle zu haben, nachdem Sie den Cursor zurückgesetzt und ein wenig schütteln, damit sich der Cursor bewegt. Dies wird in meinem Blog veröffentlicht http://arunmobc.blogspot.com/2011/02/cursor-not-changing- isue.html.

Answer 15

$ ('*'). CSS ('Cursor', 'warte'); funktioniert überall auf der Seite einschließlich Links