Lazy Image Style

Trefwoorden

Een module die gelijkt op 'Image Lazy Loader' maar werkt volgens een totaal verschillend principe. Image Lazy Loader laadt de afbeeldingen pas nadat de andere inhoud werd geladen en getoond.

Deze module laadt de afbeeldingen pas als je ze ziet. Bij scrollen begint het laden dus. Je kunt instellen hoeveel pixels speling je wilt. Standaard worden alle afbeeldingen geladen die 100 px lager staan dan je kunt zien.

Bij de instellingen van de module geef je weer welke afbeeldingsstijlen je wilt voorzien met deze tool. Afbeeldingen die niet geladen worden, worden vervangen door een 1X1px witte afbeelding. De intersection Observer API werkt bij mij niet op het ogenblik van dit schrijven.

Het komt er nu op neer om inhoud te hebben in het veld dat je met deze afbeeldingsstijl instelt. Afbeeldingen en responsive afbeeldingen kunnen gebruikt worden.

Bij scrollen zie je nu de afbeeldingen trapsgewijs komen. Met het 'blue' effect krijg je dit als tussenstap. De afbeelding wordt snel maar wazig getoond.

 

Een fractie van een seconde later wordt die scherp. Voor de liefhebbers...

Voor smartphones moet je als tijdelijke afbeeldingsstijl vb groot (480X480 px) gebruiken.