Leniwe ładowanie za pomocą IntersectionObserver

Natywne leniwe ładowanie obejmuje elementy <img> i <iframe>. W przypadku pozostałych elementów — obrazów tła, wideo, kosztownych komponentów czy widżetów zewnętrznych — właściwym narzędziem jest IntersectionObserver, który odracza pracę do chwili, gdy element znajdzie się blisko obszaru widocznego.

Elementy, których ładowanie ma być odroczone, należy oznaczyć atrybutem data-src zawierającym właściwe źródło i początkowo wyrenderować niewielki element zastępczy. Należy obserwować każdy z nich, a po przecięciu zamienić data-src na src (lub w inny sposób aktywować element) i wyłączyć jego obserwowanie, aby funkcja zwrotna nie została już nigdy wywołana.

Nie można natywnie zastosować leniwego ładowania do właściwości CSS background-image. Po przecięciu należy ustawić el.style.backgroundImage = `url("${el.dataset.bg}")` albo dodać klasę CSS definiującą background-image. W tym momencie rozpoczyna się pobieranie obrazu.

W przypadku filmów znajdujących się poniżej obszaru widocznego początkowo należy pominąć atrybut src i elementy source. Po przecięciu trzeba wstawić elementy <source> i wywołać video.load(). W przeciwnym razie metadane wideo mogą zostać pobrane z wyprzedzeniem, zanim użytkownik przewinie stronę w pobliże elementu.

Osadzenia mediów społecznościowych, widżety komentarzy i skrypty czatu mogą pobierać megabajty danych. Po przecięciu należy dynamicznie zaimportować skrypt konfigurujący widżet: await import("/embed.js"). Koszt jest ponoszony dopiero wtedy, gdy użytkownik rzeczywiście przewinie stronę do tej sekcji.

Natywne leniwe ładowanie iframe nadal pobiera dokument iframe. W przypadku ciężkich osadzeń (map czy odtwarzaczy wideo) należy użyć wzorca „fasady”: wyświetlić obraz zastępczy, a po kliknięciu lub przecięciu zastąpić go właściwym iframe. Znacznie zmniejsza to początkowy rozmiar strony.

rootMargin: "200px" rozpoczyna ładowanie 200 pikseli przed wejściem elementu w obszar widoczny. Wartość należy dostosować do szybkości przewijania: zbyt mała spowoduje, że podczas szybkiego przewijania użytkownicy zobaczą elementy zastępcze, a zbyt duża zniweczy cel leniwego ładowania, ponieważ wszystko zostanie załadowane.

Po aktywowaniu leniwego ładowania należy zawsze wywołać observer.unobserve(element). W przeciwnym razie funkcja zwrotna będzie uruchamiana za każdym razem, gdy element ponownie pojawi się w obszarze widocznym — powoduje to niepotrzebne zużycie procesora i potencjalne błędy, jeśli aktywacja nie jest idempotentna.

W przypadku leniwie ładowanych obrazów należy ustawić szerokość i wysokość, a dla leniwie ładowanych kontenerów — min-height. Bez jawnych wymiarów układ strony zmienia się w miarę ładowania treści, powodując irytujące skoki podczas przewijania i pogarszając wynik Cumulative Layout Shift.

Aby zapewnić pełne Progressive Enhancement, należy umieścić leniwie ładowany element w <noscript> z właściwym src: <noscript><img src="/photo.jpg"></noscript>. Użytkownicy bez JavaScriptu otrzymają obraz załadowany od razu, a użytkownicy z JavaScriptem — wersję leniwą. Należy połączyć to z właściwym oznaczeniem data-src.

Pojedyncza instancja obserwatora może wydajnie obserwować setki elementów. Nie należy tworzyć osobnego obserwatora dla każdego elementu. Trzeba utworzyć jeden współdzielony obserwator z wybranymi opcjami i użyć observe(), aby zarejestrować każdy cel.

W przypadku elementu <img> należy używać loading="lazy" jako podstawowego mechanizmu, a IntersectionObserver rezerwować dla przypadków, których natywne leniwe ładowanie nie obejmuje. Oba rozwiązania dobrze ze sobą współdziałają: natywne ładowanie obsługuje obrazy poniżej obszaru widocznego, a IntersectionObserver — tła, komponenty i inne niestandardowe mechanizmy ładowania.

Dlaczego po aktywowaniu elementu załadowanego leniwie ważne jest wywołanie observer.unobserve(element)?

IntersectionObserver rozszerza leniwe ładowanie poza natywny mechanizm <img loading="lazy">, obejmując tła, wideo, widżety zewnętrzne i dynamiczne importy komponentów. Należy używać elementów zastępczych z data-src, zamieniać źródło po przecięciu i wyłączać obserwowanie po aktywacji. Wstępne ładowanie można realizować za pomocą rootMargin, miejsce rezerwować przez width i height, zapewnić fallback noscript oraz łączyć to rozwiązanie z natywnym leniwym ładowaniem tam, gdzie ma ono zastosowanie.