Jak utworzyć ikonę kursora ładowania, gdy wywoływana jest ajax - jquery, ajax

Usiłuję mieć kursor ładowania za każdym razem, gdywywoływane jest żądanie ajax. Jednak każdy inny element, na którym znajduje się kursor, zatrzyma kursor pokazujący ikonę ładowania. Dodanie! Ważne też nie miało znaczenia. Jak sprawić, by kursor był ładowany nad każdym unoszonym elementem?

// cursor loading function
function start_request() {
$("body").css("cursor", "progress");
}

function end_request() {
$("body").css("cursor", "auto");
}


$(".new_filter_button").click(function(){ // when a feature button is selected
var serialize = $("#new_header_filters").serialize(); // takes all the values of the filter
$.ajax({
beforeSend: start_request(),
type : "POST",
url  : "http://localhost/carprice/ajax/new-filters.php",
data : serialize,
dataType : "json",
success : function(data) {
$("#new_results_toolbar").html(data.toolbar);
$("#new_results").html(data.models);
retain_css();
end_request();
}
});
});

Odpowiedzi:

Aby odpowiedzieć na twoje pytanie, sugeruję, abyś skonfigurował style z! Ważne, a następnie używał tych stylów zamiast dodawać wbudowany css. Nie testowałem tego, ale wierzę, że to zadziała.

<style>
.inProgress {
cursor:progress!important;
}
</style>

Następnie w swoim kodzie po prostu dodaj i usuń to:

function start_request() {
$("body").addClass("inProgress");
}

function end_request() {
$("body").removeClass("inProgress");
}

Sugeruję jednak alternatywę, która byłabyaby użyć wtyczki css, która pokaże ci wskaźnik postępu i uniemożliwić interakcję użytkownika poprzez umieszczenie div na wierzchu wszystkiego. Następnie możesz dołączyć ładny wskaźnik postępu.

Będziesz musiał nie tylko dodać i usunąćKlasa „inProgress” na znaczniku body, ale także na każdym znaczniku, który ma predefiniowany kursor. W mojej witrynie ustawiłem kursory kursora dla tagów i przycisków w całej witrynie. Dodam i usuwam również klasę inProgress na wszystkich tych elementach. Może być konieczne wykonanie tej czynności również w przypadku obrazów, jeśli którykolwiek z nich ma styl css, który określa kursor pokazywany po najechaniu na niego kursorem.