Deze Lazyload-elementen Met de plugin kun je de prestaties van je website verbeteren door bepaalde secties of elementen lui te laden. Om deze functie te gebruiken voeg je gewoon de CSS class luie-sectie naar een sectie of element. Voor dynamische inhoud gegenereerd door shortcodes, gebruik je de data-lazy-shortcode attribuut.

Hoe te gebruiken

1. 1. Bewerk je pagina, bijvoorbeeld met Elementor:
      • Navigeer naar de pagina die je wilt bewerken in je WordPress dashboard.
      • Klik op Bewerken met Elementor om de Elementor editor te openen.
   2. Statische inhoud:
      • Selecteer de sectie of het element:
        • Klik op de sectie of het element dat je wilt laden.
      • Voeg de CSS-klasse toe:
        • Ga in het Elementor-paneel naar de Geavanceerd tab.
        • Zoek de CSS-klassen veld.
        • Voer de naam van de klas in luie-sectie.
   3. Dynamische inhoud (shortcodes):
      • Maak een sectie:
        • Voeg een nieuwe sectie toe in Elementor waar u de dynamische inhoud wilt weergeven.
      • HTML-widget toevoegen:
        • Voeg een HTML-widget toe aan de sectie.
      • Lazy Load HTML toevoegen:
        • Voeg in de HTML-widget de volgende code toe, ter vervanging van [uw-shortcode] met je eigenlijke shortcode:
        <div class="lazy-section" data-lazy-shortcode='[your-shortcode]'></div>
   4. YouTube-video's:
      • Voor YouTube-video's die zijn toegevoegd via de Elementor videomodule, zal de plugin automatisch de src attribuut naar gegevensbron.
      • Voeg de luie-sectie klasse naar de sectie die de video bevat.
   5. Opslaan en bekijken:
      • Sla uw wijzigingen op.
      • Bekijk een voorbeeld van de pagina om te controleren of het lazy loading-effect werkt zoals verwacht.
   VoorbeeldenVoorbeeld 1: Een afbeeldingssectie lui laden
   1. Bewerk de sectie:
      • Klik op de afbeeldingssectie in Elementor.
   2. Voeg de CSS-klasse toe:
      • Ga naar de Geavanceerd tab.
      • In de CSS-klassen veld, voeg luie-sectie.
   3. Opslaan en bekijken:
      • Sla je wijzigingen op en bekijk een voorbeeld van de pagina.
      • De afbeelding wordt nu alleen geladen wanneer deze in de viewport komt.
   Voorbeeld 2: Een Instagram-feed lui laden
   1. Maak een sectie:
      • Voeg een nieuwe sectie toe in Elementor.
   2. HTML-widget toevoegen:
      • Voeg een HTML-widget toe aan de sectie.
   3. Lazy Load HTML toevoegen:
      • Voeg in de HTML-widget de volgende code toe:
      <div class="lazy-section" data-lazy-shortcode='[instagram-feed]'></div>
   4. Opslaan en bekijken:
      • Sla je wijzigingen op en bekijk een voorbeeld van de pagina.
      • De Instagram-feed wordt alleen geladen wanneer de sectie in het kijkvenster komt.
   Voorbeeld 3: Een YouTube-video lui laden
   1. Bewerk de sectie:
      • Klik op de sectie met de YouTube-video in Elementor.
   2. Voeg de CSS-klasse toe:
      • Ga naar de Geavanceerd tab.
      • In de CSS-klassen veld, voeg luie-sectie.
   3. Opslaan en bekijken:
      • Sla je wijzigingen op en bekijk een voorbeeld van de pagina.
      • De YouTube-video wordt alleen geladen wanneer de sectie in de viewport komt of wanneer de gebruiker interageert met de placeholder.

Aanvullende informatie

Lazyload-elementen gebruikt moderne JavaScript-technieken, waaronder de Intersection Observer API, om te detecteren wanneer elementen zich in de viewport bevinden. Voor browsers die Intersection Observer niet ondersteunen, zorgt een fallback ervoor dat de elementen toch goed worden geladen.

Deze plugin vereist geen extra configuratie. Voeg gewoon de luie-sectie klasse aan een Elementor sectie of element, en de plugin doet de rest.

Hier kun je de plugin downloaden.

Neem voor meer gedetailleerde informatie en voorbeelden contact met me op via [email protected]