Insíonn an ghníomhaireacht loading="lazy" don bhrabhsálaí fáil a thréigeadh ar íomhá nó iframe go dtí go mbeidh sé ar tí dul isteach sa viewport — ag táirgeadh bandaleithead agus ag gealadh an ualaigh tosaigh, gan JavaScript.
html
Insíonn an ghníomhaireacht loading="lazy" don bhrabhsálaí fáil a thréigeadh ar íomhá nó iframe go dtí go mbeidh sé ar tí dul isteach sa viewport — ag táirgeadh bandaleithead agus ag gealadh an ualaigh tosaigh, gan JavaScript.
lazy — ábhar a fháil nuair a thugann an scroilliú isteach sa viewport é.eager (an réamhshocrú) — ábhar a fháil ar an toirt, beag beann ar an suíomh.Baineann an brabhsálaí úsáid as an imeall (fáil beagáinín sular scrollaítear an eilimint isteach) ionas go mbeidh an íomhá réidh nuair a fhiceann an úsáideoir í.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Gan toisí (nó aspect-ratio), níl aon spás fágtha ag an íomhá faighte go mall, agus nuair a thigann sí léimníonn an leathanach — ag déanú díobhála ar Cumulative Layout Shift (CLS). Coimeádaigí spás i gcónaí.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
An fáil mall ar an íomhá Largest Contentful Paint atá ag déanú dochar ar an fheidhmíochta i ndáiríre — coimeádann sí an pixel is tábhachtaí ar fionraí. Déanaigh fáil mall ar an deilbhín amháin ar an scáileán.
// 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; });
});
Bainfheidhm nádúrtha loading="lazy" an gá atá ann dó seo i bhformhór na gcásanna (cé gur fóill go bhfuil IntersectionObserver úsáideach don loighic dhéanta féin).
Faigheann fáil mall nádúrtha laghdú ar bheart tosaigh agus iarrataí ar leathanaigh fhada le go leor íomhánna — buaidh dheas soghluaiste — go saor in aisce.
Is ábhar na beag-impleachtaí: coimeádaigí na toisí chun CLS a chosaint, agus coimeádaigí íomhánna os cionn an fhilte/LCP ar gheal (fiú fetchpriority="high") ionas go bhfuil an t-ábhar tábhachtach fós ag fáil go gasta.