Geleidelijk laat je lui afbeeldingen laden met Vanilla JS

Elke moderne website moet snel zijn. Hoewel er veel technieken en plug-ins zijn om de paginasnelheid te verhogen, weet je misschien niet waar je moet beginnen.

Het progressieve script is een geweldige bron voor het verhogen van de paginasnelheid. Het werkt als een lui script voor het laden van afbeeldingen dat geleidelijk foto's laadt naarmate de gebruiker door de pagina scrolt.

Het is een gratis open source-project, dus u kunt dit downloaden en op elke website uitvoeren. Plus het werkt op 100% vanilla JS, dus het heeft geen afhankelijkheden die je kunnen verzwaren.

Je kunt de live demo bekijken op de progressieve startpagina.

Het is een beetje anders dan andere luie laadscripts, omdat het vaste beeldgroottes voor de hele pagina behoudt. Deze voorkomt de altijd zo vervelende paginasprong die je ziet wanneer afbeeldingen snel in beeld komen en verhoog de inhoudshoogte.

En de plaatsaanduidingen voor afbeeldingen zien er feitelijk uit als de afbeeldingen die u laadt. Geweldig!

Deze nette techniek geeft bezoekers een kans om bekijk hoe de afbeeldingen eruit zien voordat ze worden geladen. Het wordt allemaal afgehandeld via JavaScript, dat de locatie van de gebruiker op de pagina controleert en afbeeldingen vooraf laadt terwijl ze in beeld komen.

Geleidelijk heeft een redelijk uitgebreide API dus het is een geweldige keuze voor webontwikkelaars. De installatie kan technisch worden, dus het helpt als u de weg kent voor elementaire frontend-codering.

Maar u kunt meer leren op de hoofdpagina van GitHub, die de volledige API-documentatie, installatie-instructies en voorbeeldcodefragmenten bevat die u voor uw projecten kunt kopiëren en plakken..

Als je een betrouwbaar lazy-loading image script nodig hebt zonder de vervelende afhankelijkheden, geef dan Progressief een kans. Het is helemaal gratis en biedt veel maatwerk voor ontwikkelaars.

Neem ook een kijkje op de Progressively GitHub voor meer informatie en om de downloadbare broncode te achterhalen.