loading=lazy în HTML

<img src="poza.jpg" alt="..." width="800" height="600" loading="lazy">
<iframe src="https://..." loading="lazy"></iframe>

Ce face loading=lazy

Atributul loading de pe <img> și <iframe> spune browserului când să descarce resursa. Cu lazy, descărcarea începe doar când elementul se apropie de zona vizibilă. Cu eager (implicit), descărcarea începe imediat.

Pe o pagină lungă, cu multe fotografii sau hărți încorporate, încărcarea leneșă reduce datele descărcate și grăbește afișarea începutului paginii. Browserul începe descărcarea puțin înainte ca elementul să apară, ca să fie gata la timp.

Pune width și height pe imagini: fără ele, pagina sare când imaginile apar. Încărcarea leneșă funcționează doar cu JavaScript activ în browser; fără JavaScript, imaginile se descarcă imediat.

Atribute

Atribut	Descriere
lazy	Descărcarea se amână până când elementul este aproape de zona vizibilă.
eager	Descărcare imediată (valoarea implicită).

Exemple

Exemplul 1: Galerie cu prima imagine normală, restul leneșe

Imaginea din partea de sus se vede imediat, deci nu primește lazy.

<img src="iasi-1.jpg" alt="Palatul Culturii" width="1200" height="800">
<img src="iasi-2.jpg" alt="Grădina Botanică" width="1200" height="800" loading="lazy">
<img src="iasi-3.jpg" alt="Teatrul Național" width="1200" height="800" loading="lazy">

Ce afișează browserul

La deschidere se descarcă doar prima fotografie. În DevTools → Network, iasi-2.jpg și iasi-3.jpg apar abia când derulezi spre ele.

Exemplul 2: Hartă Google Maps în josul paginii

Un iframe de hartă încarcă mult JavaScript; cu lazy, se încarcă doar dacă utilizatorul ajunge la secțiunea de contact.

<h2>Unde ne găsești</h2>
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="400"
        title="Harta: str. Lăpușneanu 10, Iași" loading="lazy"></iframe>

Ce afișează browserul

Harta apare când derulezi la secțiunea „Unde ne găsești”; până atunci nu se descarcă nimic de la Google Maps.

Greșeli frecvente

• loading="lazy" pe imaginea principală din partea de sus (LCP): browserul o descarcă mai târziu și scorul PageSpeed scade.
• Imagini leneșe fără width și height: conținutul sare când apar (CLS mare).
• Biblioteci JavaScript de lazy loading păstrate alături de atributul nativ: imaginea poate fi gestionată de două ori.

Comenzi înrudite

• <img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).
• <iframe>: Încorporează un alt document HTML în interiorul paginii curente (videoclipuri YouTube, hărți, widget-uri).
• fetchpriority: Indică browserului dacă o imagine, un script sau o resursă preîncărcată trebuie descărcată cu prioritate mai mare sau mai mică.
• <picture>: Container flexibil pentru imagini responsive: oferă formate moderne (AVIF, WebP) și variante adaptate la mărimea ecranului.