Táto technika zlepšuje výkon webovej stránky tým, že načítava obrázky len vtedy, keď sú viditeľné alebo blízko obrazovky používateľa.

V dnešnom rýchlom digitálnom svete je vysokovýkonná webstránka nevyhnutná. Jedným z kritických aspektov je zabezpečiť, aby sa vaše obrázky načítali efektívne. Používatelia očakávajú plynulé a rýchle prehliadanie a tento článok vám ukáže, ako to dosiahnuť.

Preskúmate koncept pomalého načítavania obrázkov a naučíte sa, ako ho implementovať pomocou HTML a JavaScriptu pomocou rozhrania Intersection Observer API.

Čo je lenivé načítanie?

Lenivé načítavanie oneskoruje načítanie prvkov, ako sú obrázky, kým nie je potrebné. Namiesto načítania všetkých obrázkov pri načítaní stránky sa lenivé načítanie načítajú iba obrázky, ktoré sú aktuálne viditeľné alebo v blízkosti oblasti zobrazenia používateľa. Toto zlepšenie výkonu webových stránok znižuje počiatočný čas načítania a šetrí šírku pásma.

Prečo používať lenivé načítanie?

Existuje niekoľko presvedčivých dôvodov, prečo používať lenivé načítanie obrázkov na vašom webe, ako napríklad:

instagram viewer
  • Rýchlejšie načítanie úvodnej stránky: Lenivé načítanie zabraňuje načítaniu všetkých obrázkov naraz, čím sa skracuje počiatočný čas načítania stránky. Používatelia môžu začať interagovať s vašou stránkou skôr, čo vedie k lepšej používateľskej skúsenosti.
  • Vylepšená odozva stránky: Načítaním obrázkov počas posúvania používateľmi zostáva webová lokalita responzívna a plynulá, čo zaisťuje plynulé posúvanie a navigáciu bez toho, aby ste museli čakať na načítanie všetkého obsahu.
  • Úspora šírky pásma: Lenivé načítanie šetrí šírku pásma, vďaka čomu je ideálne pre mobilných používateľov a používateľov s pomalým internetovým pripojením. Toto môže znížiť spotrebu dát na vašom webev prospech používateľov.
  • Výhody SEO: Vyhľadávače ako Google zvážte rýchlosť stránky ako faktor hodnotenia. Lazy loading can pozitívny vplyv na výkonnosť SEO vášho webu zlepšením času načítania.

Teraz, keď už chápete, prečo je lenivé načítanie prospešné, poďme preskúmať, ako ho implementovať.

Implementácia Lazy Loading: The HTML Markup

Ak chcete začať, budete musieť upraviť kód HTML tak, aby obsahoval loading="lenivý" atribút na vašom 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čítava Atribút sa používa v HTML na ovládanie správania pri načítaní prvkov na webovej stránke. Keď nastavíte loading="lenivý" na a hovorí prehliadaču, aby odložil načítanie zdroja, kým nebude potrebný.

Momentálne stránka vyzerá takto:

Implementácia Lazy Loading: Implementácia JavaScriptu

Ak chcete posunúť svoje lenivé načítanie na ďalšiu úroveň, použite rozhranie Intersection Observer API. Toto rozhranie API vám umožňuje sledovať, kedy prvok prichádza do zobrazovanej oblasti alebo z nej odchádza.

Dôvod použitia nástroja Intersection Observer na pomalé načítavanie obrázkov je jednoduchý: keď sa stránka načíta, načítava obrázok nižšej kvality.

Potom, keď sa tento obrázok stane viditeľným vo výreze, JavaScript ho vymení za verziu s vyššou kvalitou. Ak to chcete uviesť do praxe, upravte svoj kód 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>

Tu je primárnym zdrojom obrazu verzia nízkej kvality a obraz vysokej kvality je sekundárnym zdrojom. Stránka potom vyzerá takto:

Ďalej vyberte všetky obrázky, ktoré chcete lenivo načítať:

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

Potom vytvorte IntersectionObserver objekt.

const observer = new IntersectionObserver();

Potom zadajte položky (pole IntersectionObserverEntry objekty predstavujúce pozorované prvky a ich priesečník s výrezom) a pozorovateľa ( IntersectionObserver samotná inštancia).

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

Potom skontrolujte priesečníky a vymeňte obrázok nízkej kvality za obrázok vysokej kvality vždy, keď sa tento prvok pretína.

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

Nakoniec inicializujte pozorovanie pre každý prvok.

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

A tým ste implementovali lenivé načítanie pomocou JavaScriptu.

Úvahy o lenivom načítaní

Pri integrácii lenivého načítania je dôležité zvážiť nasledujúce aspekty:

  • Prístupnosť: Na zabezpečenie dostupnosti poskytnite alternatívny text pre obrázky s alt atribút. Tieto informácie slúžia ako bod spoľahlivosti pre čítačky obrazovky.
  • Kompatibilita prehliadača: Pred implementáciou lenivého načítania potvrďte jeho kompatibilitu s rôznymi prehliadačmi. Nie všetky prehliadače podporujú túto funkciu. V niektorých prípadoch môže byť zahrnutie polyfill nevyhnutné, najmä pre staršie prehliadače. Nástroj ako Môžem použiť je cenným zdrojom na hodnotenie kompatibility prehliadačov.
  • Testovanie: Komplexné testovanie implementácie lenivého načítania naprieč spektrom zariadení a rozmerov obrazoviek má prvoradý význam.

Zvýšenie rýchlosti webových stránok a používateľského zážitku

Keď na svoj web začleníte lenivé načítanie obrázkov, môžete svoj web zrýchliť a zlepšiť používateľskú skúsenosť. Používatelia chcú rýchlejší čas načítania a plynulejšie prehliadanie a táto technika poskytuje to isté.

Navyše si užijete lepšie SEO a ušetríte na využití šírky pásma. Tak prečo čakať? Začnite optimalizovať svoje webové stránky ešte dnes pomocou tejto priamej, ale výkonnej metódy.