Jak zmienić kursor, aby poczekać, używając jQuery .load()

Question

Podczas oczekiwania na odpowiedź z .load(), czy jest jakiś sposób, aby zmienić kursor na zajęty/czekać kursor?

Answer 1

Spróbuj:

Aktualizacja do pracy z jQuery 1.8 +

$(document).ajaxStart(function() { 
    $(document.body).css({'cursor' : 'wait'}); 
}).ajaxStop(function() { 
    $(document.body).css({'cursor' : 'default'}); 
}); 

zmian kursor na dowolnym ajax początku i na końcu. Obejmuje to .load().

Wypróbuj różne style kursora tutaj:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Answer 2

Zmień kod CSS ciała na cursor: progress.

Aby to zrobić, po prostu utwórz z klasą CSS "czekanie", a następnie dodaj/usuń klasę z ciała.

CSS:

.waiting { 
    cursor: progress; 
} 

Następnie w JS:

$('body').addClass('waiting'); 

można go usunąć później z .removeClass.

• https://developer.mozilla.org/en/CSS/cursor
• http://api.jquery.com/addClass/
• http://api.jquery.com/removeClass/

Answer 3

Można to wykorzystać:

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

przed rozpoczęciem załadunku i raz całkowita zmiana kursor na auto

Answer 4

Mam nadzieję, że to pomoże

$("body").css('cursor','wait'); 
    //or 
    $("body").css('cursor','progress'); 

pozdrowienia

Answer 5

Próbowałem różnych metod znalazłem tu i inne miejsca i postanowił jest zbyt wiele błędów w różnych przeglądarkach (lub nawet konfiguracjach, takich jak użytkownicy RDP/VNC/Terminal) przy zmianie kursora myszy. Zamiast więc skończyło się z tym:

w mojej aplikacji Init odpala po dokumencie gotowy:

// Make working follow the mouse 
    var working = $('#Working'); 
    $(document).mousemove(function(e) { 
     working.css({ 
      left: e.pageX + 20, 
      top: e.pageY 
     }); 
    }); 

    // Show working while AJAX requests are in progress 
    $(document).ajaxStart(function() { 
     working.show(); 
    }).ajaxStop(function() { 
     working.hide(); 
    }); 

a pod koniec mojego HTML, tylko wewnątrz ciała mam:

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div> 

Działa bardzo podobnie do kursora myszy "ładowanie aplikacji" w systemie Windows, gdzie nadal znajduje się normalny kursor, ale można również powiedzieć, że coś się dzieje. Jest to idealne rozwiązanie w moim przypadku, ponieważ chcę, aby użytkownik czuł, że wciąż może robić inne rzeczy w oczekiwaniu, ponieważ moja aplikacja obsługuje do tej pory całkiem dobrze (wczesne etapy testowania).

Mój plik loading.gif to tylko typowe kołowrotek, około 16x16 pikseli, więc nie jest to zbyt denerwujące, ale oczywiste.

Answer 6

Musiałem poprawić powyższą wymowną odpowiedź, aby pracować z jQuery> 1.8.

$(document).ajaxStart(function() { 
    $(document.body).css({ 'cursor': 'wait' }) 
}); 
$(document).ajaxComplete(function() { 
    $(document.body).css({ 'cursor': 'default' }) 
}); 

Answer 7

nie podoba mi się rozwiązanie, które po prostu dodać właściwość css do znacznika body: to nie zadziała, jeśli masz już kursor przypisana do elementu. Podobnie jak ja używam cursor: pointer; na wszystkich moich znacznikach zakotwiczonych. Więc wpadłem na to rozwiązanie:

utworzyć klasę CSS, aby uniknąć nadpisywania aktualnego kursora (aby móc wrócić do normalnego później)

.cursor-wait { 
    cursor: wait !important; 
} 

Tworzenie funkcji dodawania i usuwania kursor

cursor_wait = function() 
{ 
    // switch to cursor wait for the current element over 
    var elements = $(':hover'); 
    if (elements.length) 
    { 
     // get the last element which is the one on top 
     elements.last().addClass('cursor-wait'); 
    } 
    // use .off() and a unique event name to avoid duplicates 
    $('html'). 
    off('mouseover.cursorwait'). 
    on('mouseover.cursorwait', function(e) 
    { 
     // switch to cursor wait for all elements you'll be over 
     $(e.target).addClass('cursor-wait'); 
    }); 
} 

remove_cursor_wait = function() 
{ 
    $('html').off('mouseover.cursorwait'); // remove event handler 
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default 
} 

Następnie utworzyć funkcję aJAX (nie używam takich imprez ajaxStart lub ajaxStop bo nie chcą używać kursora czekać ze wszystkimi moje wezwanie ajax)

get_results = function(){ 

    cursor_wait(); 

    $.ajax({ 
     type: "POST", 
     url: "myfile.php", 

     data: { var : something }, 

     success: function(data) 
     { 
      remove_cursor_wait(); 
     } 
    }); 
} 

nie jestem bardzo obeznany z obciążeniem jQuery(), ale myślę, że to będzie coś takiego:

$('button').click(function() 
{ 
    cursor_wait(); 

    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr) 
    { 
     if (statusTxt == "success") 
     { remove_cursor_wait(); } 
    }); 
}); 

DEMO

Nadzieję, że to pomaga!

Answer 8

Spróbuj:

$(document).ajaxStart(function() { 
    $('body').css('cursor', 'wait'); 
}).ajaxStop(function() { 
    $('body').css('cursor', 'auto'); 
}); 

Jak jQuery 1.8, .ajaxStop() i .ajaxComplete() metody powinny być przyłączone tylko do dokumentu.

Wymiana między .ajaxStop() z .ajaxComplete() przyniosły mi zadowalające wyniki.