Menu

Developers

Lazy image loading

1 juni 2012

Elk plaatje dat in een <img> op je pagina staat wordt direct opgevraagd door je browser. En aangezien de 'document complete' pas plaatsvindt als alle plaatjes zijn ingeladen telt de laadtijd van alle plaatjes op bij de laadtijd van de pagina.

Als je een pagina met veel plaatjes hebt is het verstandig om het laden van sommige plaatjes uit te stellen (lazy loading). Met name plaatjes die niet direct zichtbaar zijn (ver onder de fold of in een tab die niet actief is) wil je wellicht niet direct laden, aangezien dat er voor zorgt dat de 'document complete' later plaatsvindt. Terwijl daar soms nuttig javascript in zit dat je zo snel mogelijk wilt uitvoeren.

Om dit voor elkaar te krijgen kun je niet met alleen CSS af. Ook plaatjes die dmv 'visibility: hidden' of 'display: none' worden namelijk direct door je browser geladen. Je zult dus een placeholder-image moeten gebruiken voor de plaatjes die je later wilt laden. Een good old spacer.gif bijvoorbeeld. Zet wel de juiste width en height zodat deze niet hoeven te veranderen op het moment dat het echte plaatje wordt ingeladen.

In een data-attribuut zet je de url van het echte plaatje. Met javascript en jquery zet je (in de onload) het src-attribuut op de juiste waarde zodat het plaatje zal worden geladen. Dit kun je eenvoudig doen door alle plaatjes die je later wilt laden van een specifieke class (‘lazy’) te voorzien.

Voor gebruikers zonder javascript kun je het echte plaatje in een <noscript> tag zetten. Om te voorkomen dat gebruikers zonder javascript zowel de placeholder als het echte plaatje zien moet je met CSS het placeholder-plaatje verbergen. Je kunt hiervoor .lazy als selector gebruiken.

Compleet voorbeeld:

<style>
   .lazy{ display:none; }
</style>

<img src="/images/spacer.gif" data-original="/images/mypicture.jpg"
width="300" height="200" class="lazy"/>
<noscript>
   <img src="/images/mypicture.jpg" width="300" height="200" />
</noscript>

<script>
$(function() {
   $("img.lazy").each(function() {
       $(this).attr('src', $(this).attr('data-original'));
$(this).removeClass("lazy") } );
   });
</script>

Het javascriptje overschrijft voor elke <img> node met class "lazy" het src-attribuut met de waarde van het "data-original" attribuut en verwijdert de "lazy" class. Dat laatste zorgt er voor dat het element wordt getoond. De elementen met class "lazy" worden immers verborgen vanwege de CSS-regel.

blog comments powered by Disqus

Nieuwsbrief ontvangen?

Velden met een * zijn verplicht

Like ons op Facebook

Klik hieronder om ons te liken op Facebook.