Sprawdzone metody dotyczące leniwego ładowania

Jeremy Wagner

Rachel Andrew

Z kolei leniwe ładowanie obrazów i filmów przynosi dobre i wymierne wyniki, nie jest łatwe. Jeśli się pomylisz, może dojść do niezamierzonych konsekwencji. Dlatego ważne jest, aby: na przykład.

Bądź na bieżąco

Leniwe ładowanie każdego zasobu multimedialnego na stronie może być kuszące, JavaScript, ale musisz się oprzeć tej pokusie. Wszystko, co znajduje się nad elementy na ekranie nie powinny być ładowane leniwie. Takie zasoby należy uznać za kluczowe, dlatego powinna wczytywać się normalnie.

Leniwe ładowanie opóźnia ładowanie zasobów do momentu, gdy interfejs DOM stanie się interaktywny. po zakończeniu wczytywania skryptów i rozpoczęciu wykonywania. W przypadku obrazów poniżej Nie jest to problem, ale najważniejsze zasoby powinny być przeładowane standardowego elementu <img>, by wyświetlały się jak najszybciej.

Oczywiście w chwili obecnej nie jest to jasne, kiedy witryny oglądane na tak wielu ekranach o różnych rozmiarach. Co znajduje się w części strony widocznej na ekranie laptopa mogą znajdować się poniżej na urządzeniach mobilnych. Nie ma stuprocentowej rady które optymalnie podchodzi do każdej sytuacji. Wykonaj kluczowych zasobów strony i ładować je w typowy sposób w świecie mody.

Poza tym nie warto ścigać się tak rygorystycznie co do próg aktywacji leniwego ładowania. Może to być lepsze rozwiązanie, jeśli: Ustaw strefę buforowania w pewnej odległości od strony widocznej po przewinięciu, aby zacząć wyświetlać wczytywane na długo, zanim użytkownik przewinie je do widocznego obszaru. Na przykład parametr Intersection Observer API pozwala określić właściwość rootMargin w tagu Opcje (Opcje) podczas tworzenia nowej instancji IntersectionObserver. Ten skutecznie dodaje elementy bufor, który aktywuje leniwe ładowanie przed element jest w widocznym obszarze:

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

Jeśli wartość w polu rootMargin wygląda podobnie do wartości określonych dla usługi porównywania cen margin, to właśnie dlatego, że nim jest. W tym przypadku parametr dolny margines obserwowanego elementu (domyślnie jest to widoczny obszar przeglądarki, ale można go zmienić na konkretny element za pomocą właściwości root) zostało rozszerzone o 256 pikseli. Oznacza to, że funkcja wywołania zwrotnego zostanie wykonana, gdy element graficzny zostanie do 256 pikseli od widocznego obszaru, gdy obraz zacznie się ładować. zanim użytkownik ją zobaczy.

Aby uzyskać ten sam efekt w przeglądarkach, które nie obsługują obserwacji intersekcji, użyj kodu obsługi zdarzeń przewijania i dostosuj Zaznacz getBoundingClientRect, aby uwzględnić bufor.

Przesunięcia układu i obiekty zastępcze

Leniwe ładowanie multimediów może powodować przesunięcia układu, jeśli nie są używane obiekty zastępcze. Takie zmiany mogą być dezorientujące dla użytkowników i powodować kosztowny układ DOM. które zużywają zasoby systemowe i przyczyniają się do zacinania. Minimum warto użyć symbolu zastępczego w jednolitym kolorze, który ma te same wymiary co wymiar docelowego obrazu lub technik takich jak LQIP lub SQIP, który wskazuje zawartość multimediów przed załadowaniem.

W przypadku tagów <img> element src powinien początkowo wskazywać zmienną, a później jest aktualizowany o końcowy adres URL obrazu. Użyj atrybutu poster w <video> wskazujący obraz zastępczy. Dodatkowo używaj interfejsów width i Atrybuty height w tagach <img> i <video>. Dzięki temu przejście z obiektów zastępczych na ostateczne obrazy nie zmieni wyświetlanego rozmiaru podczas wczytywania multimediów.

Opóźnienia dekodowania obrazu

Wczytanie dużych obrazów w JavaScript i upuszczenie ich w elemencie DOM może powiązać w głównym wątku, przez co interfejs nie odpowiada przez krótki czas. podczas dekodowania. Asynchroniczne dekodowanie obrazów za pomocą interfejsu decode przed wstawieniem ich do DOM można ograniczyć tego rodzaju zagniecenia, uwaga: funkcja nie jest jeszcze dostępna wszędzie i zwiększa złożoność leniwego ładowania. Jeśli chcesz go użyć, musisz to sprawdzić. Poniżej programów jak używać funkcji Image.decode() z użyciem kreacji zastępczej:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

Kliknij ten link CodePen, aby dowiedzieć się, podobny do tego przykładu w praktyce. Jeśli większość zdjęć jest dość mała, to może niewiele pomóc, ale z pewnością pomoże ograniczyć zacinanie się reklam, aby umożliwić leniwe ładowanie dużych obrazów i wstawianie ich do DOM.

Gdy coś się nie wczytuje

Czasami zasoby multimedialne z jakiegoś powodu nie ładują się z jakiegoś powodu i mogą występować błędy wystąpienia. Kiedy może to nastąpić? To zależy, ale mamy jeden hipotetyczny scenariusz dla Ciebie: masz zasady HTML buforowania przez krótki czas (np. pięć min), a użytkownik odwiedza witrynę lub ma otwartą nieaktualną kartę zbyt długi czas (np. kilka godzin) i wróci do zapoznania się z Twoją treścią. W pewnym momencie procesu następuje ponowne wdrożenie. Podczas tego wdrożenia nazwa zasobu obrazu zmieniła się z powodu obsługi wersji opartej na haszach lub została usunięta a nawet ich anulowania. Gdy użytkownik leniwie ładuje obraz, zasób i tym samym kończy się niepowodzeniem.

Choć są to stosunkowo rzadkie przypadki, może być konieczne utworzenie kopii zapasowej zaplanować, gdy leniwe ładowanie się nie uda. W przypadku obrazów może to wyglądać np. to:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

To, co zrobisz w przypadku błędu, zależy od Twojej aplikacji. Dla: można zastąpić obszar zastępczy obrazu przyciskiem, który pozwala użytkownik spróbuje ponownie załadować obraz lub po prostu wyświetli się komunikat o błędzie w obszarze zastępczym obrazu.

Mogą też wystąpić inne scenariusze. Cokolwiek robisz, nigdy nie jest złym pomysłem informuje użytkownika o wystąpieniu błędu i ewentualnie zachęca do działania. do podjęcia, gdy coś pójdzie nie tak.

Dostępność JavaScript

Nie zakładaj, że JavaScript jest zawsze dostępny. Jeśli masz zamiar na leniwe ładowanie obrazów, rozważ dodanie znaczników <noscript>, które będą wyświetlać obrazy JavaScript jest niedostępny. Najprostszy przykład kreacji zastępczej obejmuje używanie elementów <noscript> do wyświetlania obrazów przy wyłączonej obsłudze JavaScriptu:

Jeśli JavaScript jest wyłączony, użytkownicy zobaczą zarówno obraz zastępczy, jak i obrazu zawartego w elementach <noscript>. Aby obejść ten problem, umieść klasa no-js w tagu <html>, jak na przykład:

<html class="no-js">

Następnie umieść jeden wiersz wbudowanego skryptu w <head> przed arkuszami stylów są wywoływane za pomocą tagów <link>, które usuwają klasę no-js z <html> element, jeśli włączony jest JavaScript:

<script>document.documentElement.classList.remove("no-js");</script>

Na koniec użyj CSS, aby ukryć elementy z klasą leniwe, gdy: JavaScript jest niedostępny:

.no-js .lazy {
  display: none;
}

Nie zapobiega to ładowaniu obrazów zastępczych, ale daje lepsze efekty. jest pożądane. Użytkownicy z wyłączoną obsługą JavaScriptu uzyskują coś więcej niż symbol zastępczy co jest lepsze niż zmienne i brak istotnych treści graficznych w wszystko.