Această tehnică îmbunătățește performanța paginii web prin încărcarea imaginilor numai atunci când sunt vizibile sau în apropierea ecranului utilizatorului.

În lumea digitală rapidă de astăzi, a avea un site web de înaltă performanță este esențială. Un aspect critic al acestui lucru este să vă asigurați că imaginile dvs. se încarcă eficient. Utilizatorii se așteaptă la o experiență de navigare lină și rapidă, iar acest articol vă va arăta cum să realizați acest lucru.

Veți explora conceptul de încărcare leneșă a imaginilor și veți afla cum să îl implementați folosind HTML și JavaScript cu API-ul Intersection Observer.

Ce este Lazy Loading?

Încărcarea leneră întârzie încărcarea elementelor, cum ar fi imaginile, până când este necesar. În loc să încarce toate imaginile când se încarcă o pagină, încărcarea leneră încarcă numai imaginile care sunt vizibile în prezent sau în apropierea zonei de vizualizare a utilizatorului. Această îmbunătățire a performanței site-ului scade timpul inițial de încărcare și economisește lățimea de bandă.

instagram viewer

De ce să folosiți Lazy Loading?

Există mai multe motive convingătoare pentru a utiliza încărcarea leneșă a imaginilor pe site-ul dvs. web, cum ar fi:

  • Încărcare mai rapidă a paginii inițiale: Încărcarea leneră împiedică încărcarea tuturor imaginilor simultan, reducând timpul inițial de încărcare a paginii. Utilizatorii pot începe să interacționeze cu site-ul dvs. mai devreme, ceea ce duce la o experiență mai bună pentru utilizator.
  • Recepție îmbunătățită a paginii: Prin încărcarea imaginilor pe măsură ce utilizatorii derulează, site-ul web rămâne receptiv și fluid, asigurând o defilare și o navigare lină, fără a fi nevoie să așteptați încărcarea întregului conținut.
  • Economii de lățime de bandă: Încărcarea leneră economisește lățimea de bandă, ceea ce o face ideală pentru utilizatorii de telefonie mobilă și cei cu conexiuni lente la internet. Acesta poate reduceți consumul de date al site-ului dvs, beneficiind utilizatorii.
  • Beneficii SEO: Motoarele de căutare precum Google luați în considerare viteza paginii ca factor de clasare. Încărcare leneșă poate impact pozitiv asupra performanței SEO a site-ului dvs prin îmbunătățirea timpului de încărcare.

Acum că înțelegeți de ce încărcarea leneșă este benefică, să explorăm cum să o implementăm.

Implementarea Lazy Loading: Markupul HTML

Pentru a începe, va trebui să modificați codul HTML pentru a include loading="leneș" atribut pe dvs Etichete.

<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 Se încarcă Atributul este folosit în HTML pentru a controla comportamentul de încărcare al elementelor de pe o pagină web. Când ai setat loading="leneș" pe o etichetă, îi spune browserului să amâne încărcarea resursei până când este necesar.

Momentan pagina arata asa:

Implementarea Lazy Loading: Implementarea JavaScript

Pentru a duce încărcarea leneșă la următorul nivel, utilizați API-ul Intersection Observer. Acest API vă permite să urmăriți când un element intră sau iese din fereastra de vizualizare.

Motivul din spatele utilizării Intersection Observer pentru imagini cu încărcare leneșă este simplu: atunci când pagina se încarcă, preia o imagine de calitate inferioară.

Apoi, pe măsură ce această imagine devine vizibilă în fereastra de vizualizare, JavaScript o schimbă cu versiunea de calitate superioară. Pentru a pune acest lucru în practică, modificați codul 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>

Aici, sursa primară a imaginii este versiunea de calitate scăzută, iar imaginea de înaltă calitate este sursa secundară. Pagina arata astfel:

Apoi, selectați toate imaginile pe care doriți să le încărcați leneș:

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

După aceea, creați un IntersectionObserver obiect.

const observer = new IntersectionObserver();

Apoi introduceți intrările (o matrice de IntersectionObserverEntry obiecte, reprezentând elementele care sunt observate și intersecția lor cu fereastra) și observator (the IntersectionObserver instanța în sine).

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

Apoi, verificați dacă există intersecții și schimbați imaginea de calitate scăzută cu una de înaltă calitate ori de câte ori acel element se intersectează.

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

În cele din urmă, inițializați observația pentru fiecare element.

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

Și cu asta, ați implementat încărcare leneră cu JavaScript.

Considerații privind încărcarea leneșă

Atunci când integrați încărcarea leneră, devine vital să luați în considerare următoarele aspecte:

  • Accesibilitate: Pentru a asigura accesibilitatea, furnizați text alternativ pentru imaginile cu alt atribut. Aceste informații servesc drept punct de încredere pentru cititoarele de ecran.
  • Compatibilitate browser: Înainte de implementarea încărcării leneșe, confirmați compatibilitatea acesteia cu diferite browsere. Nu toate browserele extind suportul pentru această caracteristică. În anumite cazuri, includerea unui polyfill poate deveni imperativă, în special pentru browserele mai vechi. Un instrument ca Pot folosi este o resursă valoroasă pentru evaluarea compatibilității browserului.
  • Testare: Testarea cuprinzătoare a implementării încărcării lene pe un spectru de dispozitive și dimensiuni ale ecranului capătă o importanță capitală.

Îmbunătățirea vitezei site-ului și a experienței utilizatorului

Când încorporați încărcare leneră pentru imagini pe site-ul dvs., vă puteți accelera site-ul și îmbunătăți experiența utilizatorului. Timp de încărcare mai rapid și experiențe de navigare mai fluide sunt ceea ce doresc utilizatorii, iar această tehnică oferă același lucru.

În plus, vă veți bucura de un SEO mai bun și vă veți economisi din utilizarea lățimii de bandă. Deci, de ce să aștepți? Începeți să vă optimizați site-ul chiar astăzi cu această metodă simplă, dar puternică.