Tato technika zlepšuje výkon webové stránky tím, že načítá obrázky pouze tehdy, když jsou viditelné nebo blízko obrazovky uživatele.

V dnešním uspěchaném digitálním světě je vysoce výkonný web nezbytný. Jedním z kritických aspektů je zajistit, aby se vaše obrázky načítaly efektivně. Uživatelé očekávají plynulé a rychlé prohlížení a tento článek vám ukáže, jak toho dosáhnout.

Prozkoumáte koncept líného načítání obrázků a naučíte se, jak jej implementovat pomocí HTML a JavaScriptu s rozhraním Intersection Observer API.

Co je líné načítání?

Líné načítání zpožďuje načítání prvků, jako jsou obrázky, dokud není potřeba. Namísto načítání všech obrázků při načítání stránky, líné načítání načítá pouze obrázky, které jsou aktuálně viditelné nebo v blízkosti zobrazovací oblasti uživatele. Toto zlepšení výkonu webových stránek snižuje počáteční dobu načítání a šetří šířku pásma.

Proč používat líné načítání?

Existuje několik pádných důvodů, proč používat líné načítání obrázků na vašem webu, například:

  • Rychlejší načítání úvodní stránky: Líné načítání zabraňuje načítání všech obrázků najednou, čímž se zkracuje počáteční doba načítání stránky. Uživatelé mohou začít s vaším webem pracovat dříve, což povede k lepší uživatelské zkušenosti.
  • Vylepšená odezva stránky: Načítáním obrázků při posouvání uživatelů zůstává webová stránka responzivní a plynulá, což zajišťuje plynulé posouvání a navigaci bez nutnosti čekat na načtení veškerého obsahu.
  • Úspora šířky pásma: Líné načítání šetří šířku pásma, takže je ideální pro mobilní uživatele a uživatele s pomalým internetovým připojením. To může snížit spotřebu dat vašeho webuve prospěch uživatelů.
  • Výhody SEO: Vyhledávače jako Google považovat rychlost stránky za hodnotící faktor. Lazy loading can pozitivně ovlivnit výkon SEO vašeho webu zlepšením doby načítání.

Nyní, když chápete, proč je líné načítání výhodné, pojďme prozkoumat, jak jej implementovat.

Implementace Lazy Loading: The HTML Markup

Chcete-li začít, budete muset upravit svůj HTML kód tak, aby obsahoval loading="líný" atribut na vašem značky.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

The načítání atribut se používá v HTML k řízení chování při načítání prvků na webové stránce. Když nastavíte loading="líný" na říká prohlížeči, aby odložil načítání zdroje, dokud nebude potřeba.

V tuto chvíli stránka vypadá takto:

Implementace líného načítání: Implementace JavaScriptu

Chcete-li posunout své líné načítání na další úroveň, použijte rozhraní Intersection Observer API. Toto rozhraní API vám umožňuje sledovat, kdy prvek vstoupí do výřezu nebo z něj odejde.

Důvod použití Intersection Observer pro líné načítání obrázků je jednoduchý: když se stránka načte, načte obrázek nižší kvality.

Poté, když se tento obrázek stane viditelným ve výřezu, JavaScript jej vymění za verzi s vyšší kvalitou. Chcete-li to uvést do praxe, upravte svůj HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Zde je primárním zdrojem obrazu nekvalitní verze a vysoce kvalitní obraz je sekundárním zdrojem. Stránka pak vypadá takto:

Dále vyberte všechny obrázky, které chcete líně načíst:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Poté vytvořte IntersectionObserver objekt.

const observer = new IntersectionObserver();

Poté předejte položky (pole IntersectionObserverEntry objekty představující pozorované prvky a jejich průsečík s výřezem) a pozorovatele ( IntersectionObserver samotná instance).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Dále zkontrolujte průsečíky a vyměňte obrázek nízké kvality za obrázek vysoké kvality, kdykoli se tento prvek protne.

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
 }
 });
});

Nakonec inicializujte pozorování pro každý prvek.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

A s tím jste implementovali líné načítání pomocí JavaScriptu.

Úvahy o líném načítání

Při integraci líného načítání je důležité vzít v úvahu následující aspekty:

  • Přístupnost: Chcete-li zajistit dostupnost, poskytněte alternativní text pro obrázky s alt atribut. Tyto informace slouží jako bod spolehlivosti pro programy pro čtení z obrazovky.
  • Kompatibilita prohlížeče: Před implementací líného načítání ověřte jeho kompatibilitu s různými prohlížeči. Ne všechny prohlížeče podporují tuto funkci. V určitých případech se může zahrnutí polyfill stát nezbytností, zejména pro starší prohlížeče. Nástroj jako Mohu použít je cenným zdrojem pro hodnocení kompatibility prohlížečů.
  • Testování: Komplexní testování implementace líného načítání napříč spektrem zařízení a rozměrů obrazovek má prvořadý význam.

Zvýšení rychlosti webu a uživatelské zkušenosti

Když na svůj web začleníte líné načítání obrázků, můžete svůj web zrychlit a zlepšit uživatelský dojem. Uživatelé chtějí rychlejší načítání a plynulejší prohlížení a tato technika poskytuje totéž.

Navíc si užijete lepší SEO a ušetříte za využití šířky pásma. Tak proč čekat? Začněte optimalizovat svůj web ještě dnes pomocí této přímočaré, ale výkonné metody.