Afbeeldingen zoeken die lazyload krijgen met Chrome Console

Lazy Loading van afbeeldingen in webontwikkeling

Lazy loading is een techniek in webdesign die wordt gebruikt om de prestaties van een website te verbeteren door afbeeldingen pas te laden wanneer ze zichtbaar zijn in het zichtbare deel van de webpagina. Hierdoor wordt de laadtijd van de pagina verkort en wordt de gebruikerservaring geoptimaliseerd. Het zorgt ervoor dat gebruikers niet hoeven te wachten tot alle afbeeldingen zijn geladen voordat ze de inhoud van de pagina kunnen bekijken.

In dit artikel gaan we dieper in op het gebruik van JavaScript om lazy loading van afbeeldingen te detecteren en te activeren. We maken gebruik van de Inspector Tools van een webbrowser en de JavaScript-functie die hieronder is gegeven.

function findATFLazyLoadedImages() {
  const lazy = document.querySelectorAll('[loading="lazy"]');
  let flag = false;
  lazy.forEach((tag) => {
    const position = parseInt(tag.getBoundingClientRect().top);
    if (position < window.innerHeight && position !== 0) {
      console.log(tag, position);
      flag = true;
    }
  });

  return flag;
}

console.log(findATFLazyLoadedImages());

Code in detail

• We definiëren de functie findATFLazyLoadedImages(), die wordt gebruikt om lazy-loaded afbeeldingen te detecteren. Deze functie zoekt alle HTML-elementen met het attribuut loading ingesteld op “lazy” met behulp van document.querySelectorAll.
• Vervolgens doorlopen we alle geselecteerde elementen en berekenen we hun positie ten opzichte van het zichtbare deel van de webpagina met getBoundingClientRect(). Als de positie kleiner is dan de hoogte van het browser venster (window.innerHeight>) en niet gelijk is aan 0, betekent dit dat het element zichtbaar is op het scherm.
• Als een zichtbaar element wordt gedetecteerd, wordt het element samen met de positie in de console gelogd, en wordt de vlag flag op “true” gezet.
• Uiteindelijk retourneert de functie flag, die “true” is als er ten minste één lazyloaded afbeelding wordt gedetecteerd.
• We roepen de functie aan en loggen het resultaat in de console.

Dit script kan handig zijn om te controleren of lazyloading correct is geconfigureerd op een webpagina en om te testen of de afbeeldingen op de juiste momenten worden geladen. Het helpt ontwikkelaars om de prestaties van hun websites te optimaliseren en de gebruikerservaring te verbeteren door onnodige belasting van netwerkhulpbronnen te voorkomen.