Leniwe ładowanie obrazów poza ekranem za pomocą leniwego rozmiaru

Katie Hempenius

Aby wykonać te ćwiczenia z programowania, otwórz ten błąd w drugiej karcie.

Leniwe ładowanie polega na czekaniu na wczytanie zasobów, aż będą potrzebne, zamiast ładować je z wyprzedzeniem. Może to poprawić wydajność, zmniejszając ilość zasobów, które muszą być wczytywane i analizowane przy wstępnym wczytaniu strony.

Obrazy umieszczone poza ekranem podczas początkowego wczytywania strony to idealne rozwiązanie. A co najważniejsze, dzięki leniwym rozmiarom można bardzo łatwo wdrożyć taką strategię.

Dodaj skrypt leniwego rozmiaru do strony

• Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

Plik lazysizes.min.js został już pobrany i dodany do tego błędu. Aby go uwzględnić na stronie:

• Dodaj ten tag <script> do witryny index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

Uwaga: plik lazysizes.min.js został już dodany do tego projektu, więc nie musisz go dodawać oddzielnie. Dodany przed chwilą skrypt może go używać.

Leniwe rozmiary inteligentnie wczytują obrazy, gdy użytkownik przewija stronę, i nadaje priorytet tym obrazom, z którymi użytkownik wkrótce się zetknie.

Wskaż obrazy do leniwego ładowania

• Dodaj klasę lazyload do obrazów, które powinny być ładowane leniwie. Dodatkowo zmień atrybut src na data-src.

Na przykład zmiany dla flower3.png będą wyglądać tak:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

W tym przykładzie wypróbuj leniwe ładowanie flower3.png, flower4.jpg i flower5.jpg.

Uwaga: być może zastanawiasz się, dlaczego należy zmienić atrybut src na data-src. Jeśli ten atrybut nie zostanie zmieniony, wszystkie obrazy zostaną wczytane natychmiast zamiast leniwego ładowania. data-src nie jest atrybutem rozpoznawanym przez przeglądarkę, więc gdy napotka tag graficzny z tym atrybutem, nie wczytuje obrazu. W tym przypadku jest to dobra wiadomość, ponieważ dzięki temu skrypt leniwego rozmiaru decyduje, kiedy wczytać obraz, a nie do przeglądarki.

Zobacz, jak to działa

Znakomicie. Aby zobaczyć, jak te zmiany działają, wykonaj te czynności:

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .

• Otwórz konsolę i znajdź obrazy, które zostały przed chwilą dodane. Zajęcia na koncie powinny zmienić się z lazyload na lazyloaded w miarę przewijania strony.

• Obserwuj panel sieci, aby widzieć, jak pliki graficzne są ładowane pojedynczo, gdy przewijasz stronę w dół.

Zweryfikuj, korzystając z Lighthouse

Warto też zweryfikować te zmiany za pomocą narzędzia Lighthouse. Audyt wydajności „Przekaż obrazy poza ekranem” w Lighthouse wskazuje, czy nie dodano leniwego ładowania do obrazów niewyświetlanych na ekranie.

1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Lighthouse.
4. Upewnij się, że na liście Kategorie jest zaznaczone pole wyboru Skuteczność.
5. Kliknij przycisk Wygeneruj raport.
6. Sprawdź, czy kontrola odroczania obrazów poza ekranem została zakończona.

Success! Do leniwego ładowania obrazów na stronie używasz leniwego rozmiaru.