Lazy laden van beelden met jQuery

Een zeer belangrijk kenmerk van een website is zeker de laadsnelheid van de pagina's. Ondanks een trage site, het duurt te lang om ons te tonen wat we willen, in feite, de meeste van de gebruikers sluit de pagina te schakelen op een alternatieve locatie of een concurrent. Internet is niet een instrument voor geduldige mensen ;-)

De techniek van Lazy Loading (vertaald in het "luie loading") van beelden is juist om te voorkomen dat lange wachttijden en onnodig in een webpagina. Deze programmering techniek is niet, in feite, refererend aan beelden, maar omvat alle middelen "nutteloos" bij het laden, riorse dat zal uiteraard, opgehaald "on demand" wanneer er een behoefte.

We worden geconfronteerd met het discours van de beelden zoals ze zijn in wezen het zwaarste deel van een webpagina. De gebruiker start een pagina is niet noodzakelijk zal bekijk alle foto's, misschien omdat ze verborgen zijn of gewoon omdat het geplaatst op de bodem of in een gebied ver van waar de gebruiker wil toegang tot informatie.
Dergelijke situaties doen zich vooral voor zeer grote pagina's, hoe kunnen ze die van de blog (die in beschuldiging van de vele reacties, zeer lang kan zijn). In omstandigheden als deze heeft geen zin om alle afbeeldingen te laden bij het opstarten, vooral die aan de onderkant, omdat het mag nooit bekeken!

Ter uitvoering van lui laden techniek kan worden geïmplementeerd op verschillende manieren.
De meest voor de hand dat opkomt is om de beelden te verwijderen on the fly van de DOM met behulp van JavaScript. Maar dit zou ook verkeerd zijn, omdat de manier waarop de meeste browsers, maar de aanvraag hebt ingediend en niet de afbeelding die je zou het volledige effect je wilt.
Een goede techniek, benadrukt in het artikel van Paul Hammond Speed ​​Up Your Site met Vertraagde inhoud is, in plaats daarvan, aangepaste attributen te gebruiken in HTML5. Laten we eens kijken hoe.

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