Lazy loading af billeder med jQuery

Et meget vigtigt element i en hjemmeside er afgjort hastigheden af ​​lastning sider. På trods af en langsom websted, der tager for lang tid at vise os, hvad vi vil, i virkeligheden de fleste af brugerne lukker side ved at skifte til en anden lokalitet eller konkurrent. Internettet er ikke et værktøj for tålmodige mennesker ;-)

Teknikken af Lazy Loading (oversat til "dovne loading") af billeder er netop at undgå lange ventetider og unødvendige inden for en webside. Denne programmering teknik er ikke i virkeligheden, henviser til billeder, men dækker alle de ressourcer, "ubrugelig", når det belastninger, riorse der vil naturligvis hentet "on demand", når der er et behov.

Vi står over for den diskurs af billeder, som de er stort set de tungeste del af en webside. Brugeren starter en side er ikke nødvendigvis alle vil se billederne, måske fordi de er skjult eller simpelthen fordi de er placeret i bunden eller i et område langt fra, hvor brugeren ønsker at få adgang til information.
Sådanne situationer opstår især for meget store sider, som er dem af bloggen (som i anklage om mange kommentarer, kan være meget lang). I en sag som denne giver ingen mening at indlæse alle billederne ved opstart, specielt dem, der findes på bunden, fordi det aldrig kunne ses!

At gennemføre den dovne lastning teknikken kan implementeres på forskellige måder.
Det mest oplagte, der kommer til at tænke på er at fjerne de billeder on the fly fra DOM ved hjælp af JavaScript. Men det ville også være forkert, fordi den måde de fleste browsere stadig ikke har fremsendt anmodningen af ​​billedet og du vil få den fulde ønskede effekt.
En god teknik, er fremhævet i artiklen af Paul Hammond Speed ​​Up Your Site med Forsinket indhold er, i stedet for at bruge brugerdefinerede attributter i HTML5. Lad os se hvordan.

• <<
• 1
• 2
• 3
• >>