Jak leniwie ładować obrazy przy użyciu HTML i JavaScript
W dzisiejszym szybko zmieniającym się cyfrowym świecie posiadanie wydajnej strony internetowej jest niezbędne. Jednym z krytycznych aspektów jest zapewnienie wydajnego ładowania obrazów. Użytkownicy oczekują płynnego i szybkiego przeglądania, a ten artykuł pokaże, jak to osiągnąć.
Zagłęb się w pojęcie wydajnego ładowania obrazów, znanego jako leniwe ładowanie, i odkryj jego implementację przy użyciu HTML i JavaScript w połączeniu z interfejsem API Intersection Observer.
Co to jest leniwe ładowanie?
Leniwe ładowanie to technika optymalizacji, która odracza ładowanie komponentów wizualnych, w szczególności obrazów, do momentu, gdy staną się one niezbędne do wyświetlenia. W przeciwieństwie do wstępnego ładowania wszystkich obrazów po wejściu na stronę internetową, ta metodologia selektywnie pobiera obrazy, które są obecnie w pobliżu lub w polu widzenia widza. Zwiększając wydajność witryny, skraca czas potrzebny na inicjalizację i oszczędza przepustowość transferu danych w sieci.
Dlaczego warto korzystać z Lazy Loading?
Rzeczywiście, istnieje wiele przekonujących powodów dla włączenia leniwego ładowania treści wizualnych na platformie internetowej, w tym między innymi:
Wdrożenie technik leniwego ładowania może znacznie zwiększyć wydajność stron internetowych poprzez odroczenie ładowania obrazów do czasu, gdy będą one wymagane do przeglądania. Takie podejście nie tylko skraca początkowy czas ładowania strony, ale także umożliwia użytkownikom szybsze rozpoczęcie interakcji z witryną, co ostatecznie poprawia ogólne wrażenia użytkownika.
Witryna utrzymuje wysoki poziom responsywności poprzez dynamiczne ładowanie obrazów podczas przewijania strony przez użytkownika, eliminując w ten sposób wszelkie opóźnienia w przewijaniu i nawigacji, które mogą wynikać z oczekiwania na pełne załadowanie całej zawartości. Takie podejście pozwala na płynną interakcję z zawartością witryny przy jednoczesnym zachowaniu jej ogólnej wydajności.
Leniwe ładowanie to technika projektowania stron internetowych, która polega na odroczeniu ładowania nieistotnych treści do czasu, gdy będą potrzebne, skracając w ten sposób początkowy czas ładowania strony internetowej. Oszczędzając przepustowość dzięki tej metodzie, strony internetowe są lepiej zoptymalizowane pod kątem urządzeń mobilnych i osób z wolniejszymi połączeniami internetowymi. W rezultacie leniwe ładowanie może znacznie zmniejszyć ogólne zużycie danych przez witrynę, zapewniając ostatecznie bardziej przyjazne dla użytkownika wrażenia dla odwiedzających.
Optymalizacja pod kątem rankingów wyszukiwarek ma kluczowe znaczenie w dzisiejszym cyfrowym krajobrazie, a jednym z kluczowych aspektów, który odgrywa ważną rolę w tym zakresie, jest wydajność witryny. W szczególności wyszukiwarki takie jak Google biorą pod uwagę czynniki takie jak szybkość strony przy określaniu, które witryny mają być wyświetlane w widocznym miejscu na ich stronach wyników.W tym kontekście wykazano, że leniwe ładowanie ma pozytywny wpływ na wydajność SEO ze względu na jego zdolność do skrócenia czasu ładowania, co ostatecznie prowadzi do poprawy komfortu użytkowania i lepszych ogólnych rankingów wyszukiwarek.
W świetle wyżej wymienionych zalet, pozwolę sobie wyjaśnić proces wdrażania leniwego ładowania w aplikacji internetowej.
Wdrażanie leniwego ładowania: Znaczniki HTML
Aby zainicjować proces, należy zmienić znaczniki HTML poprzez włączenie atrybutu “loading=‘lazy’” w znaczniku obrazu.
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
Atrybut loading, stosowany w kontekście znaczników HTML, służy do regulowania sposobu ładowania różnych elementów wyświetlanych na stronie internetowej. Określając “loading=‘lazy’” w znaczniku img, przeglądarka jest instruowana, aby opóźnić pozyskanie powiązanego zasobu do czasu, gdy stanie się on wymagany do renderowania lub dalszego przetwarzania.
Obecnie strona internetowa ma następujący układ:
Implementing Lazy Loading: Implementacja JavaScript
Aby zwiększyć funkcjonalność techniki leniwego ładowania, należy rozważyć wykorzystanie interfejsu API Intersection Observer. To potężne narzędzie pozwala na monitorowanie elementów wchodzących lub wychodzących z rzutni użytkownika, zapewniając bardziej precyzyjne i wydajne podejście do ładowania treści.
Uzasadnienie wykorzystania Intersection Observer w połączeniu z leniwym ładowaniem obrazów jest stosunkowo proste. Kiedy strona internetowa początkowo się ładuje, pobiera wersję obrazu o zmniejszonej rozdzielczości zamiast wszystkich obrazów w wysokiej rozdzielczości, które nie są natychmiast widoczne dla użytkownika.
Gdy miniaturka o niskiej rozdzielczości pojawi się w obszarze wyświetlania przeglądarki, JavaScript zastępuje ją bardziej szczegółową wersją o wysokiej rozdzielczości. Aby zaimplementować tę funkcję, należy wprowadzić pewne zmiany w kodzie HTML.
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
Podstawowym elementem wizualnym na tej stronie jest obraz o niskiej rozdzielczości, podczas gdy reprezentacja o wyższej jakości służy jako zasób pomocniczy. W związku z tym witryna prezentuje się w taki sposób, że zawiera jednocześnie obrazy niskiej i wysokiej jakości.
Na początek należy wybrać elementy wizualne, które będą ładowane leniwie, aby zapewnić bardziej wydajne wrażenia użytkownika:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
Następnie utwórz obiektIntersectionObserver.
const observer = new IntersectionObserver();
Rzeczywiście, dostarczymy tablicę zawierającą zbiór obiektów IntersectionObserverEntry , które zawierają informacje dotyczące monitorowanych elementów, a także ich przecięć z obszarem wizualnym, wraz z instancją IntersectionObserver , która służy jako nasze narzędzie obserwacyjne.
const observer = new IntersectionObserver((lazyImages, observer) => { });
Następnie sprawdzimy wszelkie przecięcia i zastąpimy obraz o niższej jakości wersją o wyższej jakości, gdy odpowiedni element wejdzie w kontakt.
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
Na koniec inicjalizujemy obserwację dla każdego elementu.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
Rzeczywiście, stosując JavaScript, z powodzeniem zrealizowałeś strategię leniwego ładowania.
Twoja przeglądarka nie obsługuje tagu wideo.
Rozważania na temat leniwego ładowania
Aby skutecznie wdrożyć leniwe ładowanie w aplikacji internetowej, należy wziąć pod uwagę kilka krytycznych czynników. Obejmują one rozważenie, jak i kiedy ładować dane, a także określenie, które komponenty powinny być leniwie ładowane. Ponadto należy dokładnie rozważyć wpływ leniwego ładowania na wydajność i wrażenia użytkownika, szczególnie w odniesieniu do opóźnień sieciowych i dostępnej przepustowości. Ważne jest również, aby upewnić się, że leniwie ładowana zawartość może nadal działać niezależnie po jej załadowaniu, bez polegania na innych zasobach, które nie zostały jeszcze pobrane. Wreszcie, należy wdrożyć odpowiednie mechanizmy obsługi błędów, aby obsłużyć wszelkie potencjalne problemy, które mogą pojawić się podczas procesu leniwego ładowania.
Aby zwiększyć dostępność, konieczne jest dołączenie alternatywnego opisu obrazów za pomocą atrybutu “alt”. Znany jako odniesienie dla użytkowników czytników ekranu, ten dodatkowy tekst zapewnia, że osoby niedowidzące mogą również uzyskać znaczenie z treści prezentowanych na obrazie.
⭐ Zgodność z przeglądarkami: Przed wdrożeniem leniwego ładowania należy potwierdzić jego zgodność z różnymi przeglądarkami. Nie wszystkie przeglądarki obsługują tę funkcję. W niektórych przypadkach włączenie polyfill może stać się koniecznością, szczególnie w przypadku starszych przeglądarek. Narzędzie takie jak CanIUse jest cennym źródłem do oceny kompatybilności przeglądarek.
Nie można przecenić znaczenia przeprowadzenia wszechstronnej oceny mechanizmu leniwego ładowania, obejmującej różne urządzenia i rozmiary wyświetlaczy.
Zwiększanie szybkości strony internetowej i komfortu użytkowania
Włączenie leniwego ładowania obrazów na stronie internetowej jest skutecznym sposobem na zwiększenie jej wydajności i zapewnienie lepszego komfortu użytkowania.Skracając czas ładowania i ułatwiając płynną nawigację, podejście to jest zgodne z oczekiwaniami dzisiejszych wymagających odbiorców, którzy priorytetowo traktują szybkość i płynną interakcję.
Rzeczywiście, wykorzystanie tego podejścia nie tylko poprawi optymalizację pod kątem wyszukiwarek, ale także zmniejszy zużycie przepustowości. Na co więc czekasz? Rozpocznij usprawnianie swojej witryny od razu, stosując tę przyjazną dla użytkownika, ale skuteczną taktykę.