Najlepsze sposoby na dostosowanie własnego leniwego ładowania stron internetowych
Opublikowany: 2019-07-29Lazy Loading służy do odroczenia ładowania niektórych obrazów lub elementów strony internetowej na później, gdy użytkownik odwiedza stronę internetową. Zwykle robi się to w przypadku obrazów i elementów witryny w części strony widocznej na ekranie. Chodzi o to, że zamiast ładować całą stronę za jednym razem, ładujesz niektóre jej części, gdy użytkownik przewija w dół.
Główną zaletą korzystania z leniwego ładowania jest skrócenie czasu ładowania całej witryny. Lazy Loading poprawia wydajność witryny i zapewnia lepsze wrażenia użytkownika, ładując najpierw górną część, którą odwiedzający mogą natychmiast rozpocząć oglądanie lub czytanie. Kiedy odwiedzający wchodzą na Twoją stronę internetową i muszą długo czekać, tracą zainteresowanie i mogą odejść. Jeśli jednak dasz im coś do oglądania lub czytania od razu podczas ładowania reszty strony internetowej, możesz trzymać je podłączone do Twojej witryny. Drugą zaletą leniwego załadunku jest redukcja kosztów. Obrazy są pobierane tylko wtedy, gdy odwiedzający witrynę odwiedza tę konkretną sekcję witryny. W związku z tym, jeśli odwiedzający nie przewinie się w dół, na jego urządzenie zostanie pobranych mniej danych, co pozwoli zaoszczędzić pieniądze.
Ze względu na te zalety, leniwe ładowanie jest doskonałym sposobem na poprawę komfortu i wydajności Twojej witryny.
Lazy Loading dla Twojej witryny możesz dostosować na dwa sposoby – za pomocą właściwości tła CSS lub tagu <img>. Jednak metoda tagu <img> jest bardziej powszechna z tych dwóch, ponieważ ta technika jest łatwa w użyciu.
<img> właściwość znacznika:
Gdy używany jest tag <img>, przeglądarka używa atrybutu src do wyzwalania ładowania obrazu. Nie ma znaczenia, czy jest to pierwszy czy setny obraz w kodzie. Jeśli przeglądarka otrzyma atrybut src, uruchomi ładowanie obrazu. Aby więc leniwie załadować te obrazy, dodaj adres URL obrazu do atrybutu innego niż src. Na przykład, jeśli umieścisz adres URL obrazu w atrybucie data-src, przeglądarka nie wyzwoli ładowania obrazu, ponieważ atrybut src jest pusty.
Teraz, gdy ładowanie z góry ustało, musimy poinformować przeglądarkę, kiedy obraz powinien zostać załadowany. Chcemy wyzwolić ładowanie obrazu, gdy tylko wejdzie do widoku. Istnieją dwa sposoby sprawdzenia czasu wejścia obrazu do rzutni:
1. Korzystanie ze zdarzeń JavaScript:
W tej technice detektory zdarzeń są używane do zmiany rozmiaru, zmiany orientacji i zdarzeń przewijania w przeglądarce. Zdarzenie scroll jest najbardziej oczywiste. Służy do sprawdzania, kiedy użytkownik przewija stronę internetową. Zdarzenia „orientationChange” i „resize” są równie istotne dla leniwego ładowania. Zdarzenie resize jest wyzwalane w przypadku zmiany rozmiaru okna przeglądarki. Zdarzenie „orientationChange” występuje, gdy urządzenie jest obracane z trybu pionowego do poziomego lub odwrotnie. W takich przypadkach zmieni się liczba obrazów widocznych na ekranie, a więc będziemy musieli uruchomić ładowanie obrazu.
Gdy wystąpi jedno z tych zdarzeń, szukamy wszystkich obrazów znajdujących się na stronie, które nie zostały jeszcze załadowane. Sprawdzając wszystkie wyładowane obrazy znajdujące się na stronie internetowej, która jest teraz w widoku, znajdujemy te, które należy natychmiast załadować. Odbywa się to za pomocą bieżącego przewijania dokumentu, wysokości okna i górnego przesunięcia obrazu.
Jeśli obraz wszedł do widoku, pobieramy adres URL obrazu z atrybutu data-src i umieszczamy go w atrybucie src, który wyzwala ładowanie obrazu. Następnie musimy usunąć z obrazu class lazy, ponieważ ta klasa powoduje, że obrazy ładują się leniwie. Po załadowaniu wszystkich obrazów detektory zdarzeń są usuwane.
W przypadku przewijania zdarzenie przewijania jest wyzwalane w sposób ciągły. Aby zwiększyć wydajność, możemy dodać mały limit czasu, który ograniczy leniwe ładowanie.
2. Korzystanie z API obserwatora skrzyżowania:
Intersection Observer API to stosunkowo nowe API w przeglądarkach. Ta technika bardzo ułatwia wykrywanie czasu elementu wchodzącego do rzutni. Ta technika zapewnia doskonałą wydajność bez użycia złożonej matematyki w porównaniu z poprzednią metodą.
Najpierw musimy dołączyć obserwatora do wszystkich obrazów, które wymagają leniwego ładowania. Gdy interfejs API wykryje, że obraz wszedł do widocznego obszaru, wybiera adres URL z data-src i umieszcza go w atrybucie src przy użyciu metody „isIntersecting”, aby wyzwolić ładowanie obrazu. Następnie klasa leniwa jest usuwana wraz z usunięciem obserwatora.
Interfejs API Intersection Observer działa szybko, nie powodując spowolnienia witryny podczas przewijania w porównaniu ze zdarzeniami JavaScript. Przy technice nasłuchiwania zdarzeń musieliśmy dodać limit czasu, który dodaje niewielkie opóźnienie. Jednak interfejs Intersection Observer API nie jest obsługiwany przez wszystkie przeglądarki. Dlatego też słuchacz zdarzeń stał się popularnym wyborem dla użytkowników.
Właściwość tła CSS:
Aby wczytać obrazy tła CSS, przeglądarka musi zbudować CSS Object Model (CSSOM) wraz z Document Object Model (DOM), aby zdecydować, czy styl CSS będzie miał zastosowanie do modelu DOM obecnego w istniejącym dokumencie. Jeśli reguła CSS nie ma zastosowania do elementu, przeglądarka nie wczyta obrazu tła.
Dzięki tej technice stosujemy właściwość CSS background-image, gdy element pojawia się w widoku. W CSS istnieje element o identyfikatorze bg-image (obraz tła). Gdy klasa lazy zostanie dodana do obrazu, w technice CSS nadpisujemy właściwość bg-image i ustawiamy ją na zero.
Dodanie klasy .lazy do #bg-image jest preferowane w CSS niż używanie samego #bg-image. Początkowo przeglądarka stosuje obraz tła: none do elementu. Gdy przewiniemy stronę internetową, detektory zdarzeń lub obserwator przecięcia wykrywają obraz obecny w widoku i usuwają klasę .lazy. Nie ma to zastosowania w technice CSS, ponieważ właściwość bg-image jest stosowana do elementu wyzwalającego ładowanie obrazu tła.
Oto dwa sposoby dostosowania własnej leniwej strony wczytującej się. Obie te techniki zapewniają wyjątkowe rezultaty. Jeśli jednak chcesz mieć prostą technikę, powinieneś wybrać tag <img>. Istnieje wiele wtyczek dostępnych dla użytkowników WordPress, aby dostosować leniwe ładowanie obrazów również na ich stronach internetowych WordPress. Optymalizacja obrazów dla Twojej witryny WordPress za pomocą tych wtyczek wraz z leniwym ładowaniem poprawi wydajność Twojej witryny, zapewni lepsze wrażenia i pomoże również w SEO.