Het laden van een website met veel afbeeldingen kan lang duren. Het is daarom verstandig om alle inhoud buiten het scherm achteraf te laden. Wij zijn om die reden aan de slag gegaan met het ontwikkelen van een lazy loader; een tool die ervoor zorgt dat afbeeldingen pas worden ingeladen als ze ook daadwerkelijk in beeld zijn.


Onze oplossing

De oplossing die we hebben gemaakt is puur in JavaScript en zo opgebouwd dat het in veel websites kan worden geïmplementeerd zonder dat er grote wijzigingen in de bestaande content nodig zijn. 

Img tags 

Het script zoekt alle img tags op en vervangt de url van de afbeelding naar de placeholder (een tijdelijke afbeelding). Zodra de afbeelding in het scherm wordt gescrold vervangt het script de url van de afbeelding terug naar de oorspronkelijke url.


Voorbeeld van een img tag:

Om het script te kunnen gebruiken is een script tag nodig aan de onderkant van de website.


Achtergrondafbeelding

Het is ook mogelijk om dit script te gebruiken met een achtergrondafbeelding, maar deze kan niet worden gescand met JavaScript. Je moet de achtergrondafbeeldingen handmatig definiëren om deze te laten werken. Als je een element met een achtergrondafbeelding wilt markeren, voeg je hier de klasse ‘lazyload’ aan toe, zoals je ziet in onderstaand script.


Lazy loader in nieuwe website Occhio

We hebben de Lazy Loader geïmplementeerd in de nieuwe website van Occhio. Hier kan je gelijk het resultaat zien; het aantal aanvragen voordat de website geladen wordt, vermindert tot 4. Dit terwijl het eerst 24 was. Ervan uitgaande dat een afbeelding laadt in 50 ms, scheelt dit toch al snel een seconde aan laadtijd!


Het script

Het complete script van de lazy loader is hieronder weergegeven. Veel succes! Mocht je vragen hebben of opmerkingen? Stuur Dennis dan een berichtje.

var placeholder="https://loading.io/spinners/zigzag/index.zigzag-curve-preloader.svg"; function checkImages() { imgs().forEach(function(image, index, ar) { if(isScrolledIntoView(image)) { if(image.getAttribute('data-src')) { image.setAttribute('src', image.getAttribute('data-src')); } } }); bgimages().forEach(function(image, index, ar) { if(isScrolledIntoView(image)) { if(image.getAttribute('data-src')) { image.setAttribute('style', "background-image: url(" + image.getAttribute('data-src') + ")"); } } }); } function imgs() { return Array.prototype.slice.call(document.querySelectorAll("img:not(.no-lazyload)")); } function bgimages() { return Array.prototype.slice.call(document.getElementsByClassName('lazyload')); } window.onscroll = function() { checkImages(); }; function isScrolledIntoView(elem) { var docViewTop = window.pageYOffset -150; //small margin to top for almost loaded images var docViewBottom = docViewTop + window.innerHeight + 300; // small margin to bottom for almost loaded images (-50 (top) + 100 = 50 pixels. rendering var rect =elem.getBoundingClientRect(); var elemTop = rect.top + window.pageYOffset; //get position of image var elemBottom = rect.bottom + window.pageYOffset; // get bottom of element return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); // return true when elem is in window. } imgs().forEach(function(image, index, ar) { if(!isScrolledIntoView(image)) { image.setAttribute('data-src', image.getAttribute('src')); image.setAttribute('src', placeholder); } }); bgimages().forEach(function(image, index, ar) { if(!isScrolledIntoView(image)) { image.setAttribute('style', "background-image: url(" + placeholder + ")"); image.classList.add("loading"); }else { image.setAttribute('style', "background-image: url(" + image.getAttribute('data-src') + ")"); image.classList.remove("loading"); } });

Deel dit artikel via
X

Welkom! Deze website maakt gebruik van cookies

Geef hier aan welke cookies we mogen plaatsen. De noodzakelijke en statistiek-cookies verzamelen geen persoonsgegevens en helpen ons de site te verbeteren.

Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.

NaamAanbiederDoelVervaldatum
admin_authOcchio.nlWij gebruiken deze cookie om te onthouden of een Occhio.nl gebruiker is ingelogd in ons systeem.
October_sessionOcchio.nlDeze cookie wordt gebruikt door ons content management systeem en wordt geplaatst bij bezoek aan willekeurig welke pagina van onze website.
setCookiePreferenceOcchio.nlSlaat een cookie op om ons te laten weten dat u de cookiemelding hebt gelezen en geaccordeerd.
NaamAanbiederDoel
CollectGoogle-analytics.comWordt gebruikt om gegevens naar Google Analytics te verzenden over het apparaat en het gedrag van de bezoeker. Traceert de bezoeker op verschillende apparaten en marketingkanalen.
_first_pageviewGoogle-analytics.comDit is een cookie die aangemaakt wordt bij de eerste paginaweergave van deze sessie. Het zorgt ervoor dat sommige onderdelen van de cookies code alleen werken op de eerste pagina van het bezoek, waardoor de code sneller en efficiënter werkt.
_eventqueueGoogle-analytics.comDeze cookie bewaart een serie muisklikken waarvan wij niet zeker kunnen zijn of ze al opgeslagen zijn op onze webservers vóór de huidige pagina uit het geheugen van de browser is gehaald. Deze klikken worden verwerkt en gelogd op de volgende pagina.
_jsuidClicky.comDeze cookie bevat een willekeurig gekozen nummer dat aangemaakt wordt als iemand voor het eerst de website bezoekt. Het dient om nog beter te zien of een bezoeker al eerder de site heeft bezocht.

Occhio.nl maakt geen gebruik van marketing cookies.

Cookies

Wij maken op deze website gebruik van cookies. Een cookie is een eenvoudig klein bestandje dat met pagina’s van deze website wordt meegestuurd en door uw browser op de harde schrijf van uw computer wordt opgeslagen.

Bekijk hier onze privacy verklaring