Chciałbym umieścić na mojej stronie animację „proszę czekać, ładuję się” kołowrotek. Jak mam to zrobić za pomocą jQuery?
Możesz to zrobić na różne sposoby. Może to być subtelny, jak mały status na stronie z napisem „Ładowanie ...”, lub tak głośny, jak cały element wyszarzający stronę podczas ładowania nowych danych. Podejście, które przyjmuję poniżej, pokaże ci, jak osiągnąć obie metody.
Zacznijmy od uzyskania ładnej animacji „ładowania” ze strony http://ajaxload.info, której będę używać
Stwórzmy element, który możemy pokazać / ukryć za każdym razem, gdy wysyłamy żądanie ajax:
<div class="modal"><!-- Place at bottom of page --></div>
Następnie nadajmy mu nieco stylu:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
W porządku, przejdź do jQuery. Ta kolejna część jest naprawdę bardzo prosta:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
Otóż to! Dołączamy niektóre zdarzenia do elementu ciała za każdym razem, gdy uruchamiane są zdarzenia ajaxStart
lub ajaxStop
zdarzenia. Kiedy rozpoczyna się zdarzenie ajax, dodajemy do treści klasę „loading”. a po zakończeniu zdarzeń usuwamy z treści klasę „ładującą”.
Zobacz to w akcji: http://jsfiddle.net/VpDUG/4952/
.ajaxStop()
i.ajaxStart()
powinna być dołączana tylko do dokumentu. docsJeśli chodzi o rzeczywisty ładowany obraz, sprawdź tę stronę, aby znaleźć wiele opcji.
Jeśli chodzi o wyświetlanie DIV z tym obrazem, gdy rozpoczyna się żądanie, masz kilka możliwości:
A) Ręcznie pokaż i ukryj obraz:
B) Użyj ajaxStart i ajaxComplete :
Za pomocą tego elementu element pokaże / ukryje się dla każdego żądania. Może być dobry lub zły, w zależności od potrzeby.
C) Użyj poszczególnych oddzwonień dla konkretnego żądania:
źródło
Oprócz tego, co zasugerowali Jonathan i Samir (obie doskonałe odpowiedzi btw!), JQuery ma wbudowane zdarzenia, które będą uruchamiane dla ciebie podczas tworzenia żądania ajax.
Jest
ajaxStart
wydarzenie... i to jest brat,
ajaxStop
wydarzenieRazem stanowią świetny sposób na wyświetlenie komunikatu o postępie, gdy dowolna aktywność ajax ma miejsce w dowolnym miejscu na stronie.
HTML:
Scenariusz:
źródło
.ajaxStart
może być dołączone tylko do dokumentu, tj.$(document).ajaxStart(function(){}).
Możesz pobrać animowany plik GIF obracającego się koła z Ajaxload - trzymaj go gdzieś w swojej heirarchii plików na swojej stronie. Następnie wystarczy dodać element HTML z poprawnym kodem i usunąć go, gdy skończysz. Jest to dość proste:
Następnie wystarczy użyć tych metod w wywołaniu AJAX:
Ma to kilka ostrzeżeń: po pierwsze, jeśli masz dwa lub więcej miejsc, w których można wyświetlić obraz ładowania, będziesz musiał sprawdzić, ile połączeń jest uruchomionych jednocześnie, i ukryć się tylko wtedy, gdy są wszystko gotowe. Można to zrobić za pomocą prostego licznika, który powinien działać w prawie wszystkich przypadkach.
Po drugie, ukryje to tylko ładowanie obrazu podczas udanego wywołania AJAX. Aby obsłużyć stany błędów, trzeba przyjrzeć się
$.ajax
, co jest bardziej skomplikowane niż$.load
,$.get
i tym podobne, ale o wiele bardziej elastyczny zbyt.źródło
showLoadingImage
przed rozpoczęciem ihideLoadingImage
po zakończeniu. Powinno być dość proste. Może być konieczne wstawienie jakiegośsetTimeout
wywołania, aby upewnić się, że przeglądarka rzeczywiście renderuje nowy<img>
tag - widziałem kilka przypadków, w których nie przeszkadza to, dopóki JavaScript nie zakończy działania.Doskonałe rozwiązanie Jonathona pęka w IE8 (animacja wcale się nie wyświetla). Aby to naprawić, zmień CSS na:
źródło
jQuery zapewnia przechwytywanie zdarzeń, gdy żądania AJAX zaczynają się i kończą. Możesz podłączyć się do nich, aby pokazać swój moduł ładujący.
Na przykład utwórz następujący div:
Ustaw to
display: none
w swoich arkuszach stylów. Możesz go stylizować w dowolny sposób. Możesz wygenerować ładny obraz ładujący na Ajaxload.info , jeśli chcesz.Następnie możesz użyć czegoś takiego jak poniżej, aby wyświetlać się automatycznie podczas wysyłania żądań Ajax:
Po prostu dodaj ten blok Javascript na końcu strony przed zamknięciem tagu body lub w dowolnym innym miejscu.
Teraz, ilekroć wysyłasz żądania Ajax,
#spinner
div zostanie wyświetlony. Po zakończeniu żądania zostanie ono ponownie ukryte.źródło
Jeśli używasz Turbolinks z szynami, oto moje rozwiązanie:
To jest CoffeeScript
To jest SASS CSS oparty na pierwszej doskonałej odpowiedzi Jonathana Sampsona
źródło
Tak jak Mark H powiedział, że blockUI jest drogą.
Dawny.:
Obs .: Mam plik ajax-loader.gif na http://www.ajaxload.info/
źródło
Z całym szacunkiem dla innych postów, masz tutaj bardzo proste rozwiązanie, używając CSS3 i jQuery, bez użycia jakichkolwiek dodatkowych zasobów zewnętrznych ani plików.
źródło
Spowoduje to, że przyciski znikną, a następnie pojawi się animacja „ładowania” na ich miejscu, a na koniec wyświetli się komunikat o powodzeniu.
źródło
Większość rozwiązań, które widziałem, wymaga od nas zaprojektowania nakładki ładującej, ukrycia jej, a następnie odsłonięcia w razie potrzeby, lub pokazania gifa lub obrazu itp.
Chciałem opracować solidną wtyczkę, w której za pomocą zwykłego wywołania jQuery mogę wyświetlić ekran ładowania i zerwać go po zakończeniu zadania.
Poniżej znajduje się kod. To zależy od niesamowitej czcionki i jQuery:
Wystarczy umieścić powyższe w pliku js i dołączyć go do całego projektu.
Dodanie CSS:
Wezwanie:
źródło
Zauważ, że podczas korzystania z ASP.Net MVC z
using (Ajax.BeginForm(...
ustawieniemajaxStart
nie będzie działać.Użyj,
AjaxOptions
aby rozwiązać ten problem:źródło
Na https://www.w3schools.com/howto/howto_css_loader.asp jest to 2-etapowy proces bez JS:
1. Dodaj ten kod HTML w miejscu, w którym chcesz pokrętło:
<div class="loader"></div>
2. Dodaj ten CSS, aby rzeczywista przędzarka:
źródło
$("#loader").toggle();
przed długim żądaniem uruchomienia animacji i wykonać kolejne wywołanie w funkcji wywołania zwrotnego żądania, aby je ukryć.Używam CSS3 do animacji
źródło