Vue.js: Dodanie preloadera obrazów

Vue.js 2.5.x

0:00Mam nadzieję, że jesteś razem ze mną na bieżąco, ta lekcja będzie na pewno krótsza

0:04niż poprzednia. Dodamy sobie po prostu preloader zdjęć. Nie musielibyśmy tego

0:08robić, ale skoro budujemy dosyć ciekawą aplikację dlaczego by nie. Widzi,

0:12że ta aplikacja działa. Natomiast, jeżeli tutaj sobie w network zaznaczymy disable cache, odświeżamy

0:17tą aplikację, tylko pierwsze zdjęcie się wczytało. Wszystko z pamięci podręcznej jest czyszczone,

0:21jeżeli jest ta opcja, to jeżeli wybiorę sobie połączenie slow 3g i wczytam

0:25kolejny obrazek, to jeżeli ja kliknę, to tak naprawdę my tutaj czekamy i jak

0:30widzisz w network to widać. W zasadzie musielibyśmy zaznaczyć all albo

0:34samo images, widzielibyśmy, że ten obrazek jest popierany i to chwilę trwa dopiero później

0:38jest podmieniony. Ja chciałbym tutaj dodać preloader. Jeżeli ktoś ma wolniejsze połączenie

0:42tutaj wrócimy do online żeby mieć szybkie to wtedy będziemy chcieli wyświetlić

0:46taki preloader. No i teraz pytanie w jaki sposób można to zrobić. Chciałbym

0:50najpierw w ogóle stworzyć sobie funkcję, która pozwala mi pozwoli mi wczytywać

0:54obrazki. Będzie niezależna od Vue i chciałbym tutaj w src

0:58utworzyć sobie katalog helpers, czyli jesteśmy w 55 src

1:03helpers i helpers.js Chciałbym

1:09mieć taką funkcję. Z niej mogę eksportować wiele różnych funkcji, takich pomocniczych,

1:13będziemy mieli jedną, więc chciałbym zrobić export function reload

1:18image, ona otrzyma url i chciałbym

1:22tutaj zrobić rzecz następującą, otwórz nową promise, więc

1:26tutaj widzisz, korzystamy z ES6, jeżeli znasz ten zapis to świetnie, na

1:30początek może zanim stworzę promise, to jeszcze z użyciem const, stworzymy sobie

1:35obrazek document create element w przeglądarce internetowej

1:41stworzy mi obrazek i on nam posłuży do tego żeby wykonać preload, czyli

1:45chciałbym mu przypisać atrybut src na url

1:49przekazany do tej funkcji i wtedy przeglądarka mimo tego, że go nigdzie nie ma na stronie zacznie

1:53pobierać ten obrazek i kiedy go pobierze to na tym obrazku

1:57wykona się zdarzenie onload i będziemy

2:02wiedzieli, że on jest pobrany i nic z nim kompletnie nie będziemy robić, ale wtedy wiemy, że możemy

2:06ten sam url przypisać na stronę do dowolnego obrazka i przeglądarka drugi raz go

2:10nie będzie pobierać z internetu, bo ma go już w pamięci podręcznej, ale musimy to zrobić w

2:15jakiś inny sposób, to znaczy w ES6 chciałbym móc dać

2:19znać z tej funkcji kiedy się uda taki obrazek pobrać. Dlatego,

2:23że stworzymy sobie promise za pomocą new promise. Zapis EcmaScript6. Tutaj

2:28będzie funkcja, która przyjmuje dwie funkcje resolve

2:33i reject i w momencie kiedy wykonamy resolve to tak jakbyśmy dali znać,

2:37że udało się coś z tej funkcji i wyrzucić, że generalnie, żeby był sukces

2:41i to będzie asynchroniczne po jakimś czasie, więc ja chcę tutaj do tego obrazka przypisać

2:45zdarzenie onload i kiedy ono się wykona. Wykonamy sobie

2:50taką funkcję tutaj strzałkową na to zdarzenie, to chciałbym zrobić jeśli resolve i nic

2:56nie muszę dalej przekazywać, ale możemy przekazać url tego obrazka, który właśnie się wczytał. Natomiast gdyby

3:01był jakiś błąd, czyli img onerror. To są zdarzenia z przeglądarki po prostu, czyli

3:05kiedy przeglądarka wczyta taki obrazek to odpali takie zdarzenie. Stąd ja mogę coś zrobić

3:10kiedy to zdarzenie zostanie odpalone, zrobie reject z tym obrazkiem i

3:14dopiero tutaj w momencie kiedy przypisuje do tego obrazka atrybut

3:18src na url, przeglądarka zaczyna go pobierać. Kiedy go pobierze. Może

3:22to być za trzy sekundy. Wykona zdarzenie onload, a ono wywoła reject,

3:27która tutaj z prop mi zostanie przekazana, więc ostatnią rzeczą, którą chcę zrobić to zwrócić

3:31promise z całego tego wyrażenia z całej tej funkcji. Chcę

3:35zwrócić ten promise i tyle będziemy robić tutaj w helpers. Chcę sobie teraz tę

3:39funkcję zaimportować w innym pliku i będę mógł ją wtedy wywołać w ten sposób, preload images, preload image.

3:45Przekazać tutaj jakiś url. Ona zwraca promise, więc na promise mogę

3:49się odwołać then i przepisać moją funkcję, która ma się wykonać wtedy,

3:53kiedy ta promise zrobi resolve, czyli kiedy ten obrazek się wczyta, dopiero wtedy wykona

3:58się to co będzie w bloku then podane jako moja funkcja, więc może to być po kilku sekundach. Wyeksportowałem

4:03to z helpers, więc wrócimy sobie tutaj i będę chciał to zaimportować,

4:07import i skoro to był nazywany import to nie był default, to

4:11musimy go za pomocą takich nawiasów tutaj importować i podać dokładną nazwę preload image

4:16i skąd chcemy to zaimportować. Jeden katalog wyżej z

4:20komponentów helpers i helpers.js, ale

4:25nie muszę pisać js, tutaj webpack sobie z tym poradzi, więc generalnie co ja zrobiłem.

4:29Otóż mam dostęp do funkcji preload image w zupełnie innym pliku. No i o to nam

4:33chodziło i teraz będę chciał właśnie wykonać to tutaj w change slide i

4:38co dokładnie tutaj będziemy chcieli zrobić. Będę

4:43chciał zrobić rzecz taką, że zanim przepiszę to active

4:47to będę chciał ten obrazek pobrać, czyli będę

4:51chciał mieć pewność, bo przypisanie active, przypomnę ci tylko co ono robiło jeżeli

4:55przy piszemy this active równa się index, to tak naprawdę w tym pliku zostanie

5:01podmieniony url i musimy poczekać aż ten obrazek się wczyta, bo przeglądarka otrzyma

5:05taki url. Natomiast, jeżeli wykona mają funkcje preload image i wcześniej sobie go pobiorę. Moja promise

5:10da mi znać, że jest zcache'owany ten obrazek to, jeżeli do tego wtedy przepisze

5:15url, przeglądarka wczyta go z z pamięci podręcznej. Dlatego będę tutaj

5:19chciał zrobić taką rzecz, preload image url, żeby mu przekazać,

5:24to odwołam się do this images index i URL,

5:28bo tam są obiekty, pamiętaj. Moja funkcja preload image zwraca promise, a skoro

5:33zwraca promise to mogę do then przypisać co ma się wydarzyć kiedy

5:37będzie tam resolve, czyli kiedy wykona się onload. Otrzymam tutaj url, które akurat

5:41nie jest mi potrzebny, ale tak sobie zapisałem ten plik jak widziałeś,

5:45tą funkcję, że zwraca mi z powrotem ten url i chcę wykonać taką

5:49oto funkcje strzałkową. Tutaj dopiero chcę ustawić this active

5:53na index. Kiedy ten obrazek na pewno jest już pobrany. Okej,

5:58zobaczmy teraz jak to będzie wyglądać. Przechodzimy w to miejsce i zwolnimy

6:02sobie połączenie internetowe. Klikam

6:06dalej, preload się pewnie wykona i tutaj będziemy mogli zobaczyć, że active to jest cały czas

6:10zero. Dopiero jak się wykona ten preload, teraz się to zmieniło na 1

6:14i obrazek się wczytał od razu. Natomiast, żeby to było widać to będę chciał

6:18tutaj jeszcze manipulować jedną rzeczą. Mianowicie w data dodamy sobie coś takiego jak is loading

6:24i będzie to domyślnie miało wartość false. Natomiast w momencie kiedy

6:28będziemy chcieli podmienić obrazek to this loading czy is

6:33loading ustawimy na true, a kiedy on się wczyta, ustawimy

6:37to z powrotem na false i teraz

6:42za pomocą tego będzie mogli manipulować klasami CSS naszej templatce tutaj,

6:46aby pokazać loader. No i teraz w jaki sposób

6:50to zrobimy. Ja sobie tutaj wrzucę klasę. W zasadzie

6:55ona działa ze spectre CSS, więc nie będziemy musieli tego robić. Zbindujemy tylko tutaj klasę,

7:00czyli chcę przypisywać klasę, przypominam ci jak to działało, która się nazywa loading i

7:05jeżeli is loading ma wartość true. Pytanie

7:09czy to nam wystarczy. Sprawdźmy. Tutaj sobie odznaczę

7:14z powrotem na online, żeby to szybko załadować i teraz zmienię z powrotem

7:18na slow 3g, wciskam i jak widzisz taki mały

7:22preloaderek się tutaj pojawił, bo ta kasa została dodana, więc chciałbym jeszcze wyszarzyć

7:27może ten główny komponent, który tutaj mieliśmy i zrobimy to

7:31w taki sposób, że tutaj do tego elementu chcę zbindować klasę i to

7:35cię może zaskoczy, ale to nam powinno zadziałać. Będę chciał tutaj zbindować

7:39sobie klasę dimmed, jeżeli is loading, bo

7:43wiemy, że wewnątrz tego sllide nie mamy dostępu do is loading. Musiałbym to jako property przekazywać.

7:47Natomiast, jeżeli przypiszemy do custom elementu, czyli do komponentu klasy, ona

7:51powinna zostać przypisana bezpośrednio do pierwszego elementu w templatce tego slide, więc

7:56przejdźmy sobie do slide i pierwszym elementem jest ten figure, czyli on po dostać klasę dimmed. Zatem

8:01tutaj możemy na tą klasę zareagować w style, zrobimy sobie

8:05może scoped i napiszemy dimmed. Jeżeli

8:10jest dimmed to niech ma opacity pół i jeszcze

8:16może do tego figure, przypiszemy transition

8:22opacity zero dwie sekundy ease

8:26in. Okej, zobaczymy czy to ma sens. Odświeżę tutaj raz

8:30jeszcze tylko ważne żeby sobie to zmienić na online, żeby to nie trwało wiecznie ten

8:34pierwszy obrazek, zmieniamy i działa jak widzisz pięknie. Teraz

8:38ten preloader widać, bo wewnętrzny element otrzymał klasę dimmed, więc powinno

8:43to zadziałać poprawnie. Tutaj transition jak zwykle napisałem źle, ale

8:47jeżeli to napiszemy poprawnie to wtedy to będzie dużo ładniej wyglądać. Okej,

8:51super. No i ostatnią rzeczą, którą chciałbym tutaj zrobić to to, że kiedy obrazek się wczytuje

8:56kolejny, bo chciałbym żeby nie można było klikać na te przyciski, więc chciałbym żeby one

9:00były wyłączone. Nic prostszego, mamy już taką funkcję

9:04tutaj is loading i jest to w zasadzie nawet nie funkcja, tylko właściwość,

9:08więc do naszych przycisków tutaj, gdzie robiliśmy disabled, wystarczy że dodamy taki

9:12warunek. Jeżeli jesteśmy na końcu lub is loading i podobnie

9:17zrobimy tutaj, okej zapisuje,

9:21odświeżam tutaj raz jeszcze, zmieniając na online. Odświeżyło

9:26się, zmieniam na slow 3g, klikam kolejny, przyciski są wyłączone, bo

9:30is loading ma wartość true, to się nam wczytuje, kiedy się wczyta one oczywiście się

9:34odblokują, obrazek wskakuje od razu, no i jak widzisz wszystko działa

9:38jak należy. Znowu sporo rzeczy tutaj zrobiliśmy, prześledź sobie to na spokojnie,

9:42natomiast w kolejnej lekcji będziemy jeszcze kontynuować pracę nad tym

9:46ciekawym projektem.