Wielu programistów zoptymalizuje kod JavaScript i CSS, aby strona ładowała się szybciej.
Ale nie wszystkie z nich robią preloadery, które dają użytkownikowi efekt subiektywnie szybszego ładowania.
Metoda numer 1. Tanie i smaczne.
Pomysł jest prosty - w centrum należy umieścić obrazek, który pokaże użytkownikowi, że strona wciąż się ładuje. Kod jest dość prosty, piszemy zaraz potem
- < div id ="preloaderbg" class ="centerbg1" >
- < div class ="centerbg2" >
- < div id ="preloader" >
- < script type ="text/javascript" >
- document .getElementById ("preloaderbg") .style.display = "blok";
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
- .centerbg1 (
- Nie wyświetla się;
- szerokość: 100%;
- wzrost: 100%;
- pozycja: bezwzględna;
- góra: 0px;
- lewy: 0px;
- indeks z: 1000;
- tło: url („/ design / im / texture1.jpg”) # 3c363e;
- .centerbg2 (
- pozycja: bezwzględna;
- po lewej: 50%;
- góra: 50%;
- #preloader (
- góra: -50%;
- lewy: -50%;
- pozycja: względna;
- szerokość: 333px;
- wysokość: 26px;
- tło: url ();
- obramowanie: stałe # edda3d 2px;
W efekcie zaraz po załadowaniu mamy blok z animowanym paskiem postępu na środku strony. Należy zmienić parametr przepełnienia, aby pasek przewijania się nie pojawiał, a użytkownik nie mógł przewijać w dół i przeglądać zawartości strony.
Następnie, gdy wszystko jest załadowane, należy zdjąć preloader i ustawić przelew w widocznej pozycji.
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
- document .body.style.overflow = "widoczny";
Umieściłem tę część kodu w pliku z funkcjami JS, plreloader1.js
Jeśli zrobisz pasek postępu z animowanego obrazu GIF, może okazać się zbyt ciężki, czasami nawet większy niż sama strona, na której jest publikowany.
Dlatego lepiej narysować pasek (na przykład taki), umieścić go jako tło dla bloku z preloaderem ID i przesunąć pozycję tła zgodnie z zegarem.
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
A po załadowaniu robimy to:
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
- clearInterval (pbPos);
- document .getElementById ("loaderbg") .style.display = "brak";
Możesz zobaczyć wynik pracy.
Ta metoda ma wady - jeśli ustawisz ukrywanie preloadera na onload, tj. podczas oczekiwania na załadowanie wszystkich obrazów użytkownik może pomyśleć, że strona po prostu się zawiesza - w rzeczywistości nic się nie dzieje poza animacją. Jeśli zawiesisz się na $ (dokument) .ready() z jQuery, to po zniknięciu preloadera obrazy zostaną tylko załadowane.
Dlatego proponuje się używać ...
Metoda numer 2. Prawda jest tam, albo Jedi kontratakują.
Najpierw narysujmy 2 pasy ładowania - aktywne i niezbyt.
Ustawmy nieaktywny jako tło, a aktywny ustawmy jako tło dla div, dla którego będziemy zmieniać szerokość w zależności od procentowego obciążenia.
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania 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 to obraz o wysokości 1 piksela i szerokości naszego paska przewijania ( podany przykład buggy bez tego w IE i nie znalazłem jeszcze innego sposobu na wyśrodkowanie wyrównania divów z paskiem postępu).
Style są takie same jak w poprzedniej metodzie, z wyjątkiem tego
#progbarfg (szerokość: 0px; tło: url ('/ projekt / im / progbar_fg.png '))
Teraz pozostaje zrobić mały skrypt, który będzie dynamicznie ładował zawartość strony i obrazy. Jest to potrzebne, aby pasek postępu był wyświetlany i zmieniany jeszcze przed pobraniem używanego frameworka i innych plików JS.
Weźmy przeciętną witrynę zbudowaną w całości w AJAX. Pobieranie przebiega mniej więcej tak:
- Kod HTML jest załadowany
- zdjęcia zaczynają się ładować
- potem jakieś ramy
- dodatkowe pliki JS (choć lepiej wszystko skleić w jeden)
- uruchamiana jest funkcja (lub kilka), która pobiera dodatkową zawartość.
Zaimplementowałem 2 metody - pierwsza jest prosta, zawiera się tak:
bezpośrednio przed piszemy:
< script type ="text/javascript" >
dLoader.start ("progbarfg", 333, "count");
Pierwszy parametr to identyfikator bloku z aktywnym paskiem ładowania jako tło, drugi to szerokość obrazka, trzeci parametr to sposób, w jaki będziemy obliczać wagę treści.
Skrypt skanuje wszystkie zdjęcia na stronie i przypisuje im wagę równą 1. Wszystkie pliki JS są zapisane w jego ciele, co opiszę poniżej.
Jednak chcę, aby waga każdej jednostki zawartości nie była jednostką, ale rzeczywistą objętością w bajtach. A dla aplikacji AJAX chciałbym od razu załadować całą grafikę.
Aby to zrobić, napisałem skrypt PHP, który skanuje folder ze zdjęciami projektu i umieszcza to wszystko wraz z rozmiarami plików w tablicy, opcjonalnie kompresując go.
Więc po dodaniu przed następnie dostaniemy pasek postępu, który pokaże postęp ładowania wszystkich treści na stronie, po czym płynnie zniknie.
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
Po załadowaniu wszystkich plików JS uruchamiane są funkcje znajdujące się w tablicy invoke. Jeśli ładujemy treść za pomocą jQuery, funkcja będzie wyglądać tak:
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
- funkcja fn (oddzwanianie) (
- $ .get („/”, params, function (data) (someHandler (data); eval (callBack);));
Skrypt PHP wykonuje następujące czynności: wprowadza niezbędne skrypty wraz z ich rozmiarami do tablicy, a także obrazki i dodatkowe funkcje. Kod:
* Ten kod źródłowy został wyróżniony za pomocą narzędzia do podświetlania kodu źródłowego.
- $dane ["js"] = tablica (
- tablica ("ścieżka" => "jquery-1.2.6.min.js", "rozmiar" => rozmiar pliku ($ jsRoot. "/ jquery-1.2.6.min.js")),
- tablica ("ścieżka" => "funkcje.js", "rozmiar" => rozmiar pliku ($ jsRoot. "/ funkcje.js"))
- $ data ["im"] = GetFiles ($ imgRoot, prawda);
- $ data ["wywołaj"] = tablica (
- "akcja" => "załadujSzablony",
- "size" => GetDirSize (dirname (__ FILE __). "/ design / ajax templates /", false)
- $ data ["jspath"] = "/ projekt / js /";
- $ data ["impath"] = "/ projekt / im";
Po załadowaniu wszystkich obrazów i plików JS wywoływane jest zdarzenie onLoad, które określiłeś w funkcji dLoader.start()
Istnieje również sposób na dostosowanie procesu rozruchu.
Lekcja, w której rozważymy proces tworzenia strony preload dla strony. Jako preloader użyjemy ikony Font Awesome lub animowanego gifa, który będzie wyświetlany podczas ładowania strony.
Jak zrobić preloader dla strony internetowej
Strona dowolnej witryny internetowej nie ładuje się natychmiast po jej otwarciu. Załadowanie i wyświetlenie strony zajmuje trochę czasu, co może trwać od 1 do kilku sekund. Aby jakoś uprościć ten proces (czyli proces ładowania strony) dla użytkownika, można mu na ten czas pokazać animowany obrazek lub ikonę.
Proces tworzenia preloadera jest dość prosty i polega na tym, że zaraz po otwarciu strony serwisu musimy pokazać jakiś blok (# before-load) zawierający animowany obrazek lub ikonę. A po całkowitym załadowaniu strony ten blok (# przed załadowaniem) z animowanym gifem lub ikoną musi być ukryty przed użytkownikiem.
Tworzenie preloadera dla strony
W 3 krokach opracujemy preloader, który będzie wyglądał jak białe tło z animowaną ikoną:
1. Stwórzmy kod HTML składający się z bloku i ikony Font Awesome. Ten fragment kodu należy umieścić w dokumencie w taki sposób, aby w pierwszej kolejności był wyświetlany użytkownikowi, czyli zaraz po otwierającym tagu body:
2. Utwórz style CSS dla elementu div oraz elementu i (ikona).
# przed obciążeniem (pozycja: fixed; /* stała pozycja bloku * / left: 0; / * pozycja elementu w lewo * / top: 0; / * pozycja elementu od góry * / right: 0; / * pozycja elementu na prawo * / bottom : 0; / * pozycja elementu na dole * / background: #fff; / * kolor tła bloku * / z-index: 1001; / * umieść go nad wszystkimi elementami na stronie * /) # before-load i (font-size : 70px; / * rozmiar ikony * / position: absolute; / * pozycja bezwzględna, pozycjonowana względem najbliższego przodka * / left: 50% ; / * left 50% szerokości bloku nadrzędnego * / top: 50%; / * top 50% wysokości bloku nadrzędnego * / margin: -35px 0 0 -35px; / * przesunięcie ikony tak że jest wyśrodkowany * /) 3. Dodaj skrypt, który ukrywa preloder po załadowaniu strony (tj. gdy załadowany jest obiekt window ):
Jeśli chcesz użyć animowanego obrazu GIF jako wskaźnika wstępnego ładowania, musisz wprowadzić następujące zmiany w powyższych krokach:
Usuń klasy Font Awesome z kodu HTML:
V Style CSS wprowadź następujące zmiany (zmień regułę # before-load i (..)):
# przed załadowaniem i (szerokość: 70px; / * szerokość gif * / wysokość: 70px; / * wysokość gif * / pozycja: bezwzględna; lewa: 50%; góra: 50%; tło: url ("assets /images/img .gif ") bez powtórzeń 50% 50%; / * lokalizacja (adres URL) obrazy gif i inne parametry * / margines: -35px 0 0 -35px; )
Możesz pobrać animowane obrazy GIF dla swojej witryny z zasobu http://preloaders.net/ lub skorzystać z tego archiwum.
Nikt nie lubi długo czekać na załadowanie strony witryny, suwaka lub innych informacji. Ale jeśli nie jest możliwe skrócenie czasu oczekiwania strony (na przykład jest interaktywna, a wszystkie skrypty muszą być załadowane do poprawnego działania), należy spróbować jakoś rozjaśnić czas oczekiwania na pobranie.
Aby to zrobić, użyj animowanych preloaderów.
Wybraliśmy dla Ciebie 20 interesujących preloaderów, wykonanych w CSS3 i HTML5 lub jQuery. Mogą znacznie poprawić wrażenia użytkownika.
Możesz używać animowanych wskaźników ładowania dla galerii, suwaków, blogów i nie tylko.
Oto proste i eleganckie programy ładujące wykonane za pomocą Pomoc CSS... Z łatwością mogą stać się częścią dowolnego projektu internetowego - wystarczy skopiować i wkleić kod.
A to jest soczysty wstępny program do ładowania tęczy zbudowany z CSS. Nadaje się do jasnych, dynamicznych projektów młodzieżowych!
A ten wskaźnik ładowania działa dobrze w przypadku stron internetowych z projektem karty.
Ten sprytny preloader osiąga magiczny efekt dzięki połączeniu HTML i CSS. Wygląda świetnie i może wspaniale działać na każdym typie strony internetowej.
Animacja dynamiczna - kolorowe klocki, które wprawiają w ruch małą kulkę.
To świetny downloader, który można zintegrować z logo, nazwą strony lub chwytliwym sloganem. Będzie mocnym elementem brandingu Twojej strony.
Ten niesamowity program ładujący CSS jest odpowiedni dla różnych projektów i aplikacji. Prosty i elegancki, a dodasz go do swojej witryny za pomocą dwóch kliknięć.
Tylko dwa kolory i proste kształty. Ale co za ciekawa animacja! Ten preloader upiększy każdą Twoją witrynę.
Ten preloader jest idealny do dynamicznych projektów o stylowych, minimalistycznych wzorach.
Znowu klasyka, znów kostki. Ale bardzo ciekawa animacja sprawia, że ten wskaźnik ładowania przyciąga wzrok.
A to zdjęcie pochodzi z kategorii „Nie mogę oderwać oczu”. Jest po prostu hipnotyzujący i gwarantuje rozjaśnienie czasu oczekiwania użytkowników na pobieranie.
Jeśli szukasz wskaźników ładowania w stylu Tumblr, sprawdź te! Animacja włączona Oparte na CSS za pomocą ikon SVG.
A to są okrągłe, interaktywne preloadery CSS3. Najedź myszką na poszczególne obszary i zobacz ciekawy efekt.
Prosta i elegancka animacja w pastelowych kolorach. Idealny do witryn dla kobiet.
W tym zestawie możesz wybrać animację ładowania według własnego gustu. Czy będzie to zegarek, czy tylko białe kółka?
Prosta ładowarka o prostokątnych kształtach, które się obracają. Łatwy do wdrożenia w dowolnej witrynie.
A oto cała kolekcja animowanych programów do pobierania. Jest z czego wybierać i wszystkie można łatwo zintegrować z dowolną witryną.
Ciekawy preloader z kółkami. Następnie układa się je w trójkąt, a następnie w linię przerywaną.
Kolejna kolekcja wskaźników z różnymi animacjami. Wszystkie preloadery są okrągłe.
Ta animacja może być nałożona na logo tekstowe lub dowolny tekst - na przykład na nazwę firmy lub jej slogan.
Mamy nadzieję, że coś z tej kolekcji przyda się do Twojego kolejnego projektu!
W zależności od rodzaju zasobu sieciowego i ilości informacji na nim ładowanie strony może zająć od kilku milisekund do kilku sekund. W trakcie ładowania strony może się zdarzyć wiele rzeczy: układ może przeskoczyć różne strony, tekst może zmienić styl. Istnieje całkiem naturalna chęć ukrycia całej tej orgii z dala od oczu odwiedzających. Po to właśnie są preloadery.
Preloader to wskaźnik ładowania witryny. Może być wykonany jako animowany obraz gif lub pasek ładowania. Ale niezależnie od tego wygląd zewnętrzny preloader, zasada jego działania będzie taka sama: pokaż wskaźnik ładowania użytkownikowi tak szybko, jak to możliwe, i ukryj ten wskaźnik na końcu pobierania.
Jak ładuje się strona internetowa
Przed utworzeniem wskaźnika dowolnego procesu musisz zrozumieć sam proces. Ładowanie stron internetowych nie jest wyjątkiem. Jak więc ładuje się strona internetowa?
- Przeglądarka wysyła żądanie do serwera.
- Serwer zaczyna wysyłać kod html strony do przeglądarki. Specyfika transmisji danych w Internecie polega na tym, że przeglądarka otrzymuje kod strony nie od razu, ale w częściach.
- Aby zaoszczędzić czas, przeglądarka zaczyna przetwarzać kod html strony, nie czekając na koniec dokumentu.
- Gdy tylko przeglądarka napotka zasób zewnętrzny w kodzie strony, wysyła do serwera żądanie uzyskania tego zasobu. Co więcej, w większości przypadków, jeśli tym zasobem jest plik javascript, dalsze przetwarzanie strony zostanie zatrzymane do czasu pełnego załadowania i wykonania kodu javascript tego pliku.
- Gdy tylko przeglądarka całkowicie odbierze i przetworzy kod html strony (program obsługi doszedł do zamknięcia tag html), przeglądarka wywołuje zdarzenie DOMContentLoaded, znane również jako DOM Ready.
- Po załadowaniu ostatniego zasobu zewnętrznego przeglądarka zgłasza zdarzenie window.onload . Strona jest w pełni załadowana.
Proces tworzenia
Teraz, rozumiejąc kolejność ładowania strony internetowej, możesz stworzyć listę zadań i warunków dla naszego preloadera. Moje warunki dla niego są następujące:
- Powinny być wyświetlane jak najwcześniej, obejmując całą zawartość.
- W miarę możliwości wyświetlacz powinien być niezależny od zasobów zewnętrznych.
- Powinna być ukryta, gdy tylko strona zostanie w pełni załadowana. Do ukrycia można użyć dowolnej dostępnej biblioteki javascript.
Jeśli Twoja strona jest praktycznie niezależna od grafiki, zamiast window.onload możesz użyć DOM Ready, aby ukryć preloader.
Aby rozwiązać pierwszy problem, umieśćmy następujący kod HTML zaraz po otwierającym tagu body:
Dla naszego modułu wstępnego ładowania potrzebujemy stylów, ale nie chcemy polegać na plikach zewnętrznych, więc umieścimy style bezpośrednio w dokumencie, gdzieś w nagłówku:
# page-preloader (pozycja: stała; lewa: 0; góra: 0; prawa: 0; dół: 0; tło: # 000; z-index: 100500;) # page-preloader .spinner (szerokość: 32px; wysokość: 32px; pozycja: bezwzględna; lewa: 50%; góra: 50%; tło: url ("/ images / spinner.gif") bez powtórzeń 50% 50%; margines: -16px 0 0 -16px;)
Niestety nie będę mógł całkowicie zrezygnować z zasobów zewnętrznych, 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 zasobami, więc możemy skorzystać z jQuery:
$ (okno) .on ("load", function () (var $ preloader = $ ("# page-preloader")), $ spinner = $ preloader.find (". spinner"); $ spinner.fadeOut (); $ preloader.delay (350) .fadeOut („wolno”);));
Gotowy! Teraz zamiast przeskakiwania układu w różnych kierunkach, odwiedzający zobaczy nasz schludny ekran ładowania podczas ładowania strony. Działającą wersję takiego preloadera można zobaczyć na stronie
