jQuery – animacja ładowania

Przy wykonywaniu ajaksowych funkcji dobrze jest pokazać użytkownikom, że ich kliknięcie w guzik zadziałało, i że nie muszą klikać ponownie (czas oczekiwania może być dość długi, jeśli skrypt łączy się np. z gmailem).

Najłatwiej będzie zmienić kursor myszki tak, żeby było widać animację. Przed wywołaniem $.ajax wstawiamy jedną z poniższych linii:

$("body").css("cursor", "progress");
$("*").css("cursor", "progress");

Natomiast w funkcjach obsługujących odebranie odpowiedzi (uwaga, należy pamiętać zarówno o sukcesie jak i o błędzie, inaczej kursor pozostanie w takim stanie do przeładowania strony):

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

Rozwiązanie może nie zadziałać. W zależności od przeglądarki kursor myszki może zmienić się dopiero po przesunięciu go w nowe miejsce.

Innym rozwiązaniem jest pokazanie elementu z komunikatem lub animacją. Na stronę wstawiamy ukryty div z odpowiednim id, np.

<style type="text/css">
#ajax_komunikat { display: none ; }
</style>

<div id="ajax_komunikat"></div>

Podobnie, jak przy zmianie kursora, przed wywołaniem $.ajax dopisujemy wstawienie tekstu i pokazanie diva:

$("#ajax_komunikat").html( "Proszę czekać ..." ) ;
$("#ajax_komunikat").show();

Natomiast w funkcjach obsługujących odpowiedź wstawiamy ukrycie:

$("#ajax_komunikat").hide();

Nic nie stoi na przeszkodzie, żeby w divie wstawić na sztywno animację zapisaną jako gif (szkoda mocy na inne formaty). Dla większej widoczności najlepiej będzie przesunąć div w pobliże miejsca kliknięcia. Robimy to następująco:

<style type="text/css">
#ajax_komunikat { position: absolute ; display: none ; }
</style>

$("#id_obiektu").click( function(e) {
  $("#ajax_komunikat").css( "left", e.pageX+"px" ) ;
  $("#ajax_komunikat").css( "top", e.pageY+"px");
  funkcja_wywołująca_ajax() ;
});

gdzie e to zdarzenie przekazywane do funkcji wywoływanej po kliknięciu na obiekt.

• Tweet
• Pin It