W Prototypie mogę pokazać obraz „ładowanie ...” za pomocą tego kodu:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
W jQuery mogę załadować stronę serwera do elementu za pomocą:
$('#message').load('index.php?pg=ajaxFlashcard');
ale w jaki sposób mogę dołączyć ładujący spinner do tego polecenia, tak jak w Prototypie?
jquery
spinner
prototypejs
equivalence
language-interoperability
Edward Tanguay
źródło
źródło
Do jQuery używam
źródło
beforeSend
jest wywoływane przed każdym wywołaniem, aajaxStart
wyzwalane jest tylko wtedy , gdy wywoływana jest pierwsza metoda ajax. PodobnieajaxStop
jest wywoływane, gdy kończy się ostatnie wywołanie ajax. Jeśli masz więcej niż jedno współbieżne żądanie, fragment kodu w tej odpowiedzi nie będzie działał poprawnie.Możesz po prostu użyć funkcji jQuery
.ajax
i użyć jej opcjibeforeSend
i zdefiniować funkcję, w której możesz pokazać coś takiego jak div programu ładującego, a po sukcesie możesz ukryć tę div programu ładującego.Możesz mieć dowolny obraz Spinning Gif. Oto strona internetowa, która jest świetnym generatorem AJAX Loader według twojego schematu kolorów: http://ajaxload.info/
źródło
success
Nie zostanie wywołana, gdy wystąpi błąd, ale „zawsze będziesz otrzymywaćcomplete
zwrotnego, nawet dla synchronicznych żądań”, zgodnie z jQuery Ajax Events .Możesz wstawić animowany obraz do DOM tuż przed wywołaniem AJAX i wykonać funkcję wbudowaną, aby go usunąć ...
To sprawi, że twoja animacja rozpocznie się od tej samej klatki przy kolejnych żądaniach (jeśli to ma znaczenie). Pamiętaj, że starsze wersje IE mogą mieć problemy z animacją.
Powodzenia!
źródło
http://docs.jquery.com/Ajax/load#urldatacallback
źródło
Jeśli używasz
$.ajax()
, możesz użyć czegoś takiego:źródło
Użyj wtyczki ładującej: http://plugins.jquery.com/project/loading
źródło
Wariant: Mam ikonę z id = „logo” w lewym górnym rogu strony głównej; spinner gif jest następnie nakładany na wierzch (z przezroczystością), gdy działa ajax.
źródło
Skończyłem z dwiema zmianami w oryginalnej odpowiedzi .
document
. Utrudnia to filtrowanie tylko niektórych żądań ajax. Soo ...To jest kod po tych zmianach:
źródło
ajaxComplete
Wydaje się przedwcześnie ogień, gdy żądania ponownie, więc użyłem kombinacjiajaxSend
aajaxStop
i działa świetnie.Chcę również przyczynić się do tej odpowiedzi. Szukałem czegoś podobnego w jQuery i tego ostatecznie użyłem.
Mam ładujący spinner ze strony http://ajaxload.info/ . Moje rozwiązanie opiera się na tej prostej odpowiedzi pod adresem http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .
Zasadniczo twój znacznik HTML i CSS wyglądałyby tak:
A potem kod dla jQuery wyglądałby mniej więcej tak:
To takie proste :)
źródło
Możesz po prostu przypisać obraz modułu ładującego do tego samego znacznika, na którym później załadujesz zawartość za pomocą wywołania Ajax:
Możesz także zastąpić znacznik zakresu znacznikiem obrazu.
źródło
Oprócz ustawiania globalnych wartości domyślnych dla zdarzeń ajax, możesz ustawić zachowanie określonych elementów. Może wystarczy zmiana klasy?
Przykład CSS, aby ukryć #myForm za pomocą pokrętła:
źródło
Zauważ, że musisz użyć asynchronicznych wywołań, aby błystki działały (przynajmniej to spowodowało, że moje wyświetlały się dopiero po wywołaniu ajax, a następnie szybko zniknęły, ponieważ połączenie zakończyło się i usunęło błystkę).
źródło
źródło
Użyłem następujących w oknie dialogowym interfejsu użytkownika jQuery. (Może to działa z innymi wywołaniami zwrotnymi ajax?)
Zawiera animowany gif ładujący, dopóki jego zawartość nie zostanie zastąpiona po zakończeniu wywołania ajax.
źródło
To dla mnie najlepszy sposób:
jQuery :
Kawa :
Dokumenty: ajaxStart , ajaxStop
źródło
JavaScript
CSS
źródło
Jest to bardzo prosta i inteligentna wtyczka do tego konkretnego celu: https://github.com/hekigan/is-loading
źródło
Robię to:
źródło
Myślę, że masz rację. Ta metoda jest zbyt globalna ...
Jednak - jest to dobre ustawienie domyślne, gdy wywołanie AJAX nie ma wpływu na samą stronę. (na przykład zapisywanie w tle). (zawsze możesz go wyłączyć dla określonego wywołania ajax, przekazując „global”: false - zobacz dokumentację w jquery
Gdy wywołanie AJAX ma na celu odświeżenie części strony, podoba mi się, że moje „ładowanie” obrazów jest specyficzne dla odświeżonej sekcji. Chciałbym zobaczyć, która część jest odświeżana.
Wyobraź sobie, jak fajnie by było, gdybyś mógł po prostu napisać coś takiego:
Oznaczałoby to „ładowanie” w tej sekcji. Poniżej jest funkcja, którą napisałem, która obsługuje również wyświetlanie „ładowania”, ale jest specyficzna dla obszaru, który odświeżasz w ajax.
Najpierw pokażę ci, jak z niego korzystać
I to jest funkcja - podstawowy start, który możesz ulepszyć, jak chcesz. jest bardzo elastyczny.
źródło
Jeśli nie chcesz pisać własnego kodu, istnieje również wiele wtyczek, które to robią:
źródło
Jeśli planujesz używać modułu ładującego za każdym razem, gdy wysyłasz żądanie serwera, możesz użyć następującego wzorca.
Ten kod w szczególności używa wtyczki jajaxloader (którą właśnie utworzyłem)
https://github.com/lingtalfi/JAjaxLoader/
źródło
Mój kod ajax wygląda tak, w rzeczywistości właśnie skomentowałem async: false line i wyświetla się spinner.
Pokazuję kod w funkcji przed kodem ajax:
Do HTML użyłem niesamowitej klasy czcionek:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
Mam nadzieję, że to komuś pomoże.
źródło
Zawsze możesz użyć wtyczki Block UI jQuery, która robi wszystko za Ciebie, a nawet blokuje stronę dowolnego wejścia podczas ładowania ajax. Jeśli wtyczka wydaje się nie działać, w tej odpowiedzi możesz przeczytać o właściwym sposobie jej użycia . Sprawdź to.
źródło