9.6
★★★★★
★★★★★

Lazy loading met de JavaScript Intersection Observer API

Afbeeldingen zijn belangrijk voor de vormgeving en inhoud van je website. Maar ze kunnen een vertragende factor zijn in het laden van de pagina. Dat is niet leuk voor je bezoekers en het kan een negatieve invloed hebben op je positie in  zoekmachines. In dit blog kun je lezen wat voor maatregelen je hier tegen kunt nemen met behulp van JavaScript.

Lazy loading

De meest voorkomende manier van afbeeldingen plaatsen is met een <img> tag. De URL van de afbeelding wordt geplaatst in het src attribuut.

<img scr="http://example.com/url-naar-afbeelding.jpg" alt="Voorbeeldafbeelding" />

Het nadeel hiervan is dat de interactiviteit van de pagina geblokkeerd wordt tot alle afbeeldingen klaar zijn met laden. Zolang de afbeeldingen aan het laden zijn kan de bezoeker niet scrollen of op elementen klikken. Op een pagina met veel afbeeldingen kan dit soms meer dan 10 seconden duren. Op een mobiel apparaat met een slechte verbinding kan het zelf oplopen tot meer dan een minuut!

Om ervoor te zorgen dat de pagina zo snel mogelijk laadt, kan het laden van de afbeeldingen uitgesteld worden totdat ze nodig zijn. Dat wordt “lazy loading (lui laden) genoemd.

De voordelen van lazy loading

  • De pagina is sneller interactief en verbetert daarmee de ervaring van de bezoeker
  • Lazy loading heeft een positieve invloed op de ranking in zoekmachines
  • Mobiele bezoekers hebben een potentieel lager dataverbruik

Er zijn verschillende manieren om lazy loading toe te passen. De belangrijkste beschrijf ik hieronder.

Native lazy loading

Sommige moderne browsers ondersteunen lazy loading via een speciaal loading attribuut. Dat is de makkelijkste manier. De browser herkent het attribuut en weet dat de afbeelding pas geladen moet worden wanneer hij in beeld komt.

<img scr="http://example.com/url-naar-afbeelding.jpg" alt="Voorbeeldafbeelding" loading="lazy" />

Het grootste voordeel van deze methode is dat er geen JavaScript voor nodig is. Hoe minder JavaScript, hoe sneller de website. Maar er kleven een paar nadelen aan. Op het moment van schrijven heeft ruim 71% van de gebruikers volledige ondersteuning voor deze methode. Dat vinden we bij Webwijs niet genoeg. Bovendien is er nog een nadeel. Omdat het per browser verschilt hoe er met het attribuut wordt omgegaan kan dit onvoorspelbaar gedrag opleveren.


Screenshot van https://caniuse.com/loading-lazy-attr, Oktober 2020.

Lazy loading met JavaScript

Om lazy loading toe te kunnen passen op (bijna) alle apparaten en browsers zal JavaScript gebruikt moeten worden.Een bijkomend voordeel van JavaScript is dat er meer controle verkregen kan worden over het gedrag. Moet een afbeelding geladen worden voordat hij in beeld komt zodat de bezoeker niks merkt? Of moet de afbeelding pas later geladen worden zodat hij met een animatie verschijnt? Dat zijn dingen waar met JavaScript invloed op uitgeoefend kan worden.

In ieder geval zal de URL van de afbeelding in een ander attribuut geplaatst moeten worden zodat de browser de afbeelding niet zelf gaat laden. De meest voor de hand liggende keus is om daar een data-attribuut voor te nemen.

<img scr="" alt="Voorbeeldafbeelding" data-src="http://example.com/url-naar-afbeelding.jpg" />

Om de afbeelding te laden hebben we een stukje JavaScript nodig dat de URL uit het data-attribuut haalt en in het scr attribuut zet.

JavaScript scroll event

Het JavaScript scroll event wordt afgevuurd wanneer de bezoeker op de pagina scrollt. Aan de hand van de positie van de pagina ten opzichte van het scherm, in combinatie met de positie van een afbeelding ten opzichte van de de pagina, kan berekend worden wat de positie van een afbeelding ten opzichte van het scherm is. Zo kan het gewenste moment van het laden van een afbeelding bepaald worden.

Deze manier van lazy loading is het meest voorkomend. Dat komt omdat het ondersteund wordt in praktisch iedere browser. Het grootste nadeel van deze methode is dat het erg zwaar kan zijn voor sommige apparaten en of browsers. Dat kan de gebruikerservaring negatief beïnvloeden.

JavaScript Intersection Observer API

Deze methode is geintroduceerd in

De praktijk

Native lazy loading heeft beperkte ondersteuning en ook valt er op het gedrag geen invloed uit te oefenen. Programmeurs zijn natuurlijk bij uitstek controlfreaks dus de die optie valt af. Dan blijven er twee over. Wat heeft de voorkeur, de brede ondersteuning van het JavaScript scroll event? Of de lichtgewicht JavaScript Intersection Observer API? De beste oplossing bestaat uit een combinatie van beide. in het geval dat de Intersection Observer API ondersteund wordt is dat de keus. Wanneer die niet ondersteund wordt is er een terugval naar het JavaScript scroll event.

Delen?

Meer informatie over dit onderwerp? Gerwin maakt je volledig webwijs. Keertje afspreken?

Neem contact op

Mogen we jou ook webwijs maken? We zitten vol frisse ideeën waar we jou graag verder mee helpen.

Daag ons uit
Nico