Atribut loading="lazy" pove brskalniku, da odloži nalaganje slike ali okvirja, dokler se ne približa prikazu — kar prihrani pasovno širino in pospešuje začetno nalaganje, brez JavaScripta.
html
Atribut loading="lazy" pove brskalniku, da odloži nalaganje slike ali okvirja, dokler se ne približa prikazu — kar prihrani pasovno širino in pospešuje začetno nalaganje, brez JavaScripta.
lazy — naložite samo, ko valjanje pripelje do bližine prikaza.eager (privzeto) — naložite takoj, ne glede na položaj.Brskalnik uporablja rob (nalaganje malo pred tem, ko se element pomakne v pogled), zato je slika ponavadi pripravljena do trenutka, ko jo uporabnik vidi.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Brez dimenzij (ali aspect-ratio), lenobno naložena slika nima rezerviranega prostora, zato se pri nalaganju stran skoči — kar škodi Cumulative Layout Shift (CLS). Vedno rezervirajte prostor.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lenobno nalaganje slike Največje vsebinsko barve pravzaprav poslabša zmogljivost — odloži najpomembnejši slikovni element. Lenobno nalagajte samo medije zunaj zaslona.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Nativni loading="lazy" je odpravil potrebo za tem v večini primerov (čeprav je IntersectionObserver še vedno uporaben za po mero logiko).
Nativno lenobno nalaganje zmanjša začetne bajte in zahteve za dolge strani z več slikami — velik uspeh na mobilnih napravah — brezplačno.
Nianse so pomembne: rezervirajte dimenzije za zaščito CLS in ohranite slike nad zgibom/LCP v načinu eager (celo fetchpriority="high"), da se pomembna vsebina še vedno hitro naloži.