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? Neem dan contact met ons op.

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.5 jaar
October_sessionOcchio.nlDeze cookie wordt gebruikt door ons content management systeem en wordt geplaatst bij bezoek aan willekeurig welke pagina van onze website. Sessie
NaamAanbiederDoelVervaldatum
_gat_gtag_UA_63158_1Google-analytics.comGebruikt door Google Analytics om verzoeksnelheid te vertragen1 minuut
_gaGoogle-analytics.comRegistreert een uniek ID die wordt gebruikt om statistische gegevens te genereren over hoe de bezoeker de website gebruikt.1 jaar
_gidGoogle-analytics.comRegistreert een uniek ID die wordt gebruikt om statistische gegevens te genereren over hoe de bezoeker de website gebruikt.24 uur

Occhio.nl maakt geen gebruik van marketing cookies.

Cookies

Een cookie is een klein tekstbestand dat tijdens uw bezoek aan een website wordt geplaatst. In dit tekstbestand wordt informatie opgeslagen. Deze informatie kan bij een later bezoek weer worden herkend door deze website.

Bekijk hier onze privacy verklaring