Wielu programistów optymalizuje JavaScript i CSS, aby strona ładowała się szybciej.
Ale nie wszystkie z nich tworzą programy ładujące, które dają użytkownikowi efekt subiektywnie szybszego pobierania.
Metoda numer 1. Tani i wesoły.
Pomysł jest prosty - musisz wyśrodkować obraz, który pokaże użytkownikowi, że strona wciąż się ładuje. Kod jest dość prosty, napisz zaraz po
- < div id ="preloaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < script type ="text/javascript" >
- document .getElementById ("preloaderbg") .style.display \u003d "block";
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
- .centerbg1 (
- wyświetlacz: brak;
- szerokość: 100%;
- wysokość: 100%;
- pozycja: absolutna;
- góra: 0px;
- po lewej: 0px;
- indeks Z: 1000;
- background: url ("/ design / im / texture1.jpg") # 3c363e;
- .centerbg2 (
- pozycja: absolutna;
- po lewej: 50%;
- góra: 50%;
- #preloader (
- góra: -50%;
- po lewej: -50%;
- pozycja: względna;
- szerokość: 333px;
- wysokość: 26 pikseli;
- background: url ();
- border: solid # edda3d 2px;
W rezultacie natychmiast po załadowaniu pojawia się blok z animowanym paskiem postępu na środku strony. Parametr przepełnienia musi zostać zmieniony, aby pasek przewijania nie pojawił się, a użytkownik nie mógł przewinąć w dół i nie spojrzeć na zawartość strony.
Następnie, gdy wszystko się załaduje, musisz usunąć moduł wstępnego ładowania i ustawić przepełnienie na widoczne.
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
- document .body.style.overflow \u003d "visible";
Umieszczam tę część kodu w pliku z funkcjami JS, plreloader1.js
Jeśli utworzysz pasek postępu z animowanego obrazu GIF, może okazać się on zbyt ciężki, czasem nawet większy niż sama strona, na której jest umieszczony.
Dlatego lepiej narysować pasek (na przykład jeden), umieścić go jako tło bloku z preloaderem ID i przesunąć pozycję tła o czas.
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
A po załadowaniu robimy to:
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
- clearInterval (pbPos);
- document .getElementById ("loaderbg") .style.display \u003d "none";
Rezultat pracy można zobaczyć.
Ta metoda ma wady - jeśli nałożysz moduł ładujący na obciążenie, tj. kiedy czekasz, aż wszystkie zdjęcia zostaną załadowane, użytkownik może pomyśleć, że strona właśnie się zawiesiła - w rzeczywistości nic się nie dzieje oprócz animacji. Jeśli zawiesisz się na $ (document) .ready () w jQuery, to po zniknięciu preloadera zdjęcia zostaną załadowane.
Dlatego proponuje się użycie ...
Metoda numer 2. Prawda jest gdzieś w pobliżu, albo Jedi kontratakuje.
Na początek narysujemy 2 pasma ładowania - aktywne i niezbyt.
Ustaw jako nieaktywne jako tło i ustaw aktywne jako tło dla divy, dla której zmienimy szerokość w zależności od procentu obciążenia.
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
- < div id ="loaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < img src ="/design/im/progbar_ph.gif" />
- < div id ="progbarfg" >
Progbar_ph.gif jest obrazem o wysokości 1 piksela i szerokością naszego paska przewijania (ten przykład jest błędny bez IE, i nie znalazłem jeszcze innego sposobu wyśrodkowania div za pomocą paska postępu).
Style są takie same jak w poprzedniej metodzie, z wyjątkiem tego
#progbarfg (szerokość: 0px; tło: adres URL („/ \u200b\u200bdesign / im / progbar_fg.png”))
Teraz pozostaje zrobić mały skrypt, który dynamicznie ładuje zawartość strony i zdjęć. Jest to konieczne, aby pasek postępu był wyświetlany i zmieniany nawet przed pobraniem używanego frameworka i innych plików JS.
Weź przeciętną stronę wykonaną całkowicie w AJAX. Pobieranie w przybliżeniu odbywa się w następujący sposób:
- Ładowanie kodu HTML
- zdjęcia zaczynają się ładować
- potem jakieś ramy
- dodatkowe pliki JS (chociaż lepiej wszystko skleić w jednym)
- uruchamiana jest pewna funkcja (lub kilka), która gromadzi dodatkową zawartość.
Zaimplementowałem 2 metody - pierwsza jest prosta, włącza się w następujący sposób:
tuż przed napisz:
< script type ="text/javascript" >
dLoader.start („progbarfg”, 333, „count”);
Pierwszy parametr to identyfikator bloku z aktywnym paskiem ładowania jako tłem, drugi to szerokość obrazu, trzeci parametr to metoda, według której rozważamy wagę zawartości.
Skrypt skanuje wszystkie obrazy na stronach i przypisuje im wagę równą 1. Wszystkie pliki JS są zarejestrowane w jego ciele, co omówię poniżej.
Chcę jednak, aby waga każdej jednostki treści nie była jednostką, ale rzeczywistą objętością w bajtach. W przypadku aplikacji AJAX chciałbym natychmiast załadować cały harmonogram.
Aby to zrobić, napisałem skrypt w PHP, który skanuje folder z obrazami projektu i umieszcza to wszystko z rozmiarami plików w tablicy, opcjonalnie kompresując.
Więc ukończenie wcześniej Następnie otrzymujemy pasek postępu, który pokaże postęp ładowania całej zawartości na stronie, po czym stopniowo zniknie.
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
Po załadowaniu wszystkich plików JS uruchamiane są funkcje znajdujące się w tablicy invoke. Jeśli ładujemy zawartość za pomocą jQuery, funkcja będzie wyglądać następująco:
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
- funkcja fn (callBack) (
- $ .get ("/", parametry, funkcja (dane) (someHandler (dane); eval (callBack);));
Skrypt PHP wykonuje następujące czynności: umieszcza niezbędne skrypty wraz z ich rozmiarami w tablicy, a także obrazy i dodatkowe funkcje. Kod:
* Ten kod źródłowy został wyróżniony wyróżnieniem kodu źródłowego.
- $data ["js"] \u003d tablica (
- tablica („ścieżka” \u003d\u003e „jquery-1.2.6.min.js”, „rozmiar” \u003d\u003e rozmiar pliku ($ jsRoot. ”/ jquery-1.2.6.min.js”)),
- tablica („ścieżka” \u003d\u003e „funkcje.js”, „rozmiar” \u003d\u003e rozmiar pliku ($ jsRoot. ”/ functions.js”))
- $ data ["im"] \u003d GetFiles ($ imgRoot, true);
- $ data ["invoke"] \u003d array (
- „action” \u003d\u003e „loadTemplates”,
- "size" \u003d\u003e GetDirSize (nazwa katalogu (__ PLIK __). "/ design / ajax templates /", false)
- $ data ["jspath"] \u003d "/ design / js /";
- $ data ["impath"] \u003d "/ design / im";
Po załadowaniu wszystkich zdjęć i plików JS wywoływane jest zdarzenie onLoad, które zostało określone w funkcji dLoader.start ()
Nadal istnieje sposób dostosowania procesu uruchamiania.
Lekcja, w której rozważymy proces tworzenia modułu wstępnego ładowania strony (strona wstępnego ładowania). Jako preloader użyjemy ikony Font Awesome lub animowanego obrazu gif, który będzie wyświetlany podczas ładowania strony.
Jak zrobić preloader dla strony
Strona dowolnej witryny nie ładuje się natychmiast po otwarciu. Załadowanie i wyświetlenie strony zajmuje trochę czasu, od 1 do kilku sekund. Aby ten proces (tj. Proces wczytywania strony) mógł w jakiś sposób wygładzić użytkownika, można mu pokazać animowany obraz lub ikonę na ten czas.
Proces tworzenia preloadera jest dość prosty i polega na tym, że musimy pokazać jakiś blok (# przed załadowaniem) zawierający animowany obraz lub ikonę, natychmiast po otwarciu strony witryny. A po zakończeniu ładowania strony ten blok (# przed załadowaniem) z animowanym gifem lub ikoną musi zostać ukryty przed użytkownikiem.
Tworzenie modułu wstępnego ładowania strony
Opracujemy preloader, który będzie wyglądał jak białe tło z animowaną ikoną w 3 krokach:
1. Utwórz kod HTML składający się z bloku i ikony Font Awesome. Ten fragment kodu należy umieścić w dokumencie, aby był najpierw wyświetlany użytkownikowi, tj. bezpośrednio po otwierającym tagu body:
2. Utwórz style CSS dla bloku div i elementu i (ikony).
# przed ładowaniem (pozycja: stała; / * stała pozycja bloku * / lewo: 0; / * pozycja elementu po lewej * / górze: 0; / * pozycja elementu na górze * / prawo: 0; / * pozycja elementu po prawej * / dole : 0; / * dolne położenie elementu * / background: #fff; / * blokuj kolor tła * / z-index: 1001; / * umieść go nad wszystkimi elementami na stronie * /) # przed załadowaniem i (rozmiar czcionki : 70px; / * rozmiar ikony * / pozycja: bezwzględna; / * pozycja bezwzględna, ustawiona względem najbliższego przodka * / lewo: 50%; / * lewo 50% szerokości bloku rodzica * / góra: 50%; / * top 50 % wysokości bloku rodzica * / margines: -35px 0 0 -35px; / * przesunięcie ikony, dzięki czemu i skupia * /) 3. Dodaj skrypt po ukryciu preloder (czyli podczas ładowania strona załadowała nastąpi w oknie Object):
Jeśli chcesz użyć animowanego obrazu gif jako wskaźnika modułu wstępnego ładowania, musisz wprowadzić następujące zmiany w powyższych krokach:
Usuń klasy Font Awesome z kodu HTML:
W stylach CSS wprowadź następujące zmiany (zmień regułę # przed załadowaniem i (..)):
# przed załadowaniem i (szerokość: 70px; / * szerokość obrazu gif * / wysokość: 70px; / * wysokość obrazu gif * / pozycja: bezwzględna; lewa: 50%; góra: 50%; tło: adres URL („zasoby /images/img.gif ") bez powtarzania 50% 50%; / * lokalizacja (adres URL) obrazu gif i inne parametry * / margines: -35px 0 0 -35px;)
Możesz pobrać animowane obrazy gif dla swojej witryny z zasobu http://preloaders.net/ lub użyć tego archiwum.
Nikt nie lubi długo czekać na załadowanie strony, suwaka lub innych informacji. Ale jeśli nie możesz skrócić czasu oczekiwania na witrynę (na przykład jest ona interaktywna, a wszystkie skrypty muszą się załadować, aby działała poprawnie), musisz w jakiś sposób skrócić czas ładowania strony.
Aby to zrobić, użyj animowanych programów ładujących.
Wybraliśmy dla ciebie 20 interesujących preloaderów wykonanych przy użyciu CSS3 i HTML5 lub JQuery. Mogą znacznie poprawić wrażenia użytkownika.
Możesz używać animowanych wskaźników pobierania dla galerii, suwaków, blogów i innych.
Oto proste i eleganckie ładowarki CSS. Mogą z łatwością stać się częścią każdego projektu internetowego - wystarczy skopiować i wkleić kod.
I to jest soczysty preloader w kształcie tęczy, stworzony w CSS. Nadaje się do jasnych, dynamicznych projektów młodzieżowych!
Ten wskaźnik pobierania jest odpowiedni dla witryn z projektem karty.
Ten elegancki preloader osiąga magiczny efekt, łącząc HTML i CSS. Wygląda świetnie i może wspaniale działać na każdym rodzaju strony internetowej.
Animacja dynamiczna - wielokolorowe klocki, które wprawiają w ruch małą kulkę.
To świetny bootloader, który można zintegrować z logo, nazwą strony lub chwytliwym hasłem. Stanie się silnym elementem brandingowym Twojej witryny.
Ten niesamowity moduł ładujący CSS nadaje się do różnych projektów i aplikacji. Prosty i elegancki, i można go dodać do witryny za pomocą dwóch kliknięć.
Tylko dwa kolory i proste kształty. Ale co za ciekawa animacja! Ten moduł wstępnego ładowania ozdobi dowolną witrynę.
Ten moduł wstępnego ładowania jest idealny do dynamicznych projektów o stylowym, minimalistycznym designie.
Znowu klasyczny, znowu kostki. Ale bardzo interesująca animacja sprawia, że \u200b\u200bten wskaźnik pobierania przyciąga wzrok.
To zdjęcie pochodzi z kategorii „Nie mogę oderwać oczu”. Jest po prostu hipnotyzujący i gwarantuje rozjaśnienie czasu oczekiwania na pobieranie dla użytkowników.
Jeśli szukasz wskaźników pobierania, takich jak na Tumblr, sprawdź je! Animacja oparta na CSS przy użyciu ikon SVG.
Są to okrągłe, interaktywne preloadery CSS3. Najedź kursorem na poszczególne sekcje i zobacz ciekawy efekt.
Prosta i elegancka animacja w pastelowych kolorach. Idealny do witryn dla kobiet.
W tym zestawie możesz wybrać animację pobierania według własnego uznania. Czy będzie to zegarek, czy tylko białe kółka?
Prosta ładowarka o obracających się prostokątnych kształtach. Łatwy do wdrożenia na dowolnej stronie internetowej.
A oto cała kolekcja animowanych downloaderów. Jest wiele do wyboru, a wszystko można łatwo zintegrować z dowolną witryną.
Ciekawy preloader z kółkami. Są one albo ułożone w trójkąt, a następnie w linię przerywaną.
Kolejny zbiór wskaźników z różnymi animacjami. Wszystkie urządzenia do wstępnego ładowania są w kształcie koła.
Animację tę można nałożyć na logo tekstowe lub dowolny tekst - na przykład na nazwę firmy lub jej hasło.
Mamy nadzieję, że coś z tej kolekcji przyda ci się w pracy nad kolejnym projektem!
W zależności od rodzaju zasobu internetowego i ilości zawartych w nim informacji, ładowanie strony może potrwać od kilku milisekund do kilku sekund. Podczas pobierania strony może się przydarzyć wiele rzeczy: układ może przeskakiwać w różnych kierunkach, tekst może zmieniać styl. Istnieje całkowicie logiczne pragnienie, aby ukryć wszystkie te bakalie z dala od oczu odwiedzających. W tym celu zaprojektowano moduły wstępnego ładowania.
Moduł wstępnego ładowania jest wskaźnikiem ładowania witryny. Można go wykonać zarówno w postaci animowanego obrazu gif, jak i w postaci skali ładowania. Ale niezależnie od wyglądu preloadera zasada jego działania będzie taka sama: jak najszybciej pokazać użytkownikowi wskaźnik pobierania, a pod koniec pobierania ukryć ten wskaźnik.
Jak ładuje się strona internetowa
Przed utworzeniem wskaźnika dowolnego procesu musisz zrozumieć sam proces. Ładowanie strony internetowej nie jest wyjątkiem. Jak więc ładuje się strona internetowa?
- Przeglądarka wysyła żądanie do serwera.
- Serwer rozpoczyna wysyłanie kodu HTML strony do przeglądarki. Specyfika transmisji danych w Internecie polega na tym, że przeglądarka nie otrzymuje kodu strony natychmiast, ale częściowo.
- Aby zaoszczędzić czas, przeglądarka rozpoczyna przetwarzanie kodu HTML strony, nie czekając na koniec dokumentu.
- Gdy tylko przeglądarka napotka zewnętrzny zasób w kodzie strony, wysyła do serwera żądanie otrzymania tego zasobu. Ponadto w większości przypadków, jeśli ten zasób jest plikiem javascript, dalsze przetwarzanie strony zostanie zakończone do momentu pełnego załadowania i wykonania kodu javascript tego pliku.
- Gdy przeglądarka w pełni odbierze i przetworzy kod HTML strony (moduł obsługi osiągnął zamknięcie znacznika HTML), przeglądarka wywołuje zdarzenie DOMContentLoaded, znane również jako DOM Ready.
- Po załadowaniu ostatniego zasobu zewnętrznego przeglądarka podnosi zdarzenie window.onload. Strona jest w pełni załadowana.
Proces tworzenia
Teraz, rozumiejąc kolejność ładowania strony internetowej, możesz stworzyć dla siebie listę zadań i warunków dla naszego preloadera. Moje warunki dla niego są następujące:
- Powinien być wyświetlany jak najwcześniej, obejmując całą zawartość.
- O ile to możliwe, mapowanie nie powinno zależeć od zasobów zewnętrznych.
- Musi być ukryty po zakończeniu ładowania strony. Możesz użyć dowolnej dostępnej biblioteki javascript, aby ją ukryć.
Jeśli twoja strona jest prawie niezależna od grafiki, zamiast window.onload możesz użyć DOM Ready, aby ukryć preloader.
Aby rozwiązać pierwszy problem, umieść następujący kod HTML bezpośrednio za otwierającym znacznikiem body:
Do naszego modułu wstępnego ładowania potrzebujemy stylów, ale nie chcemy polegać na plikach zewnętrznych, dlatego umieścimy style bezpośrednio w dokumencie, gdzieś w głowie:
# preloader strony (pozycja: stała; lewa: 0; góra: 0; prawa: 0; dół: 0; tło: # 000; indeks Z: 100500;) # preloader strony. spinner (szerokość: 32px; wysokość: 32px; pozycja: bezwzględna; lewa: 50%; góra: 50%; tło: adres URL („/ \u200b\u200bimages / spinner.gif”) bez powtarzania 50% 50%; margines: -16px 0 0 -16px;)
Niestety nie będę w stanie całkowicie zrezygnować z zewnętrznych zasobów, ponieważ potrzebujemy animowanego obrazu gif. Ale biorąc pod uwagę niewielki rozmiar samego obrazu, jest to akceptowalna ofiara.
Teraz pozostaje tylko ukryć nasz preloader po załadowaniu strony. Tutaj nie jesteśmy już ograniczeni pod względem środków, więc możemy użyć jQuery:
$ (window) .on ("load", function () (var $ preloader \u003d $ ("# page-preloader)), $ spinner \u003d $ preloader.find (". spinner "); $ spinner.fadeOut (); $ preloader.delay (350) .fadeOut („slow”);));
Gotowe! Teraz, zamiast skakać w różnych kierunkach, odwiedzający zobaczy ładny ekran ładowania podczas ładowania strony. Działającą wersję takiego modułu wstępnego ładowania można zobaczyć na stronie
