Met deze Lazyload Elements -plugin kun je de prestaties van je website verbeteren door specifieke secties of elementen lazy te laden. Om deze functie te gebruiken, voeg je eenvoudig de CSS-klasse lazy-section toe aan een sectie of element. Gebruik het attribuut data-lazy-shortcode voor dynamische content die door shortcodes wordt gegenereerd.

Hoe te gebruiken

1. 1. Bewerk uw pagina, bijvoorbeeld met Elementor:
      • Navigeer in uw WordPress-dashboard naar de pagina die u wilt bewerken.
      •  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 u wilt lazy loaden.
      • Voeg de CSS-klasse toe:
        •  Ga in het Elementor-paneel naar het tabblad Geavanceerd .
        •  Zoek het veld CSS-klassen .
        • Voer de klassenaam 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, waarbij u vervangt [uw-shortcode] met uw eigen shortcode:
   4. YouTube-video's:
      • Voor YouTube-video's die via de Elementor-videomodule zijn toegevoegd, converteert de plug-in automatisch de bron toeschrijven aan data-bron.
      • Voeg de luie sectie klas naar het gedeelte met de video.
   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: Lazy Loading van een afbeeldingsectie
   1. Bewerk de sectie:
      • Klik op het afbeeldinggedeelte in Elementor.
   2. Voeg de CSS-klasse toe:
      •  Ga naar het tabblad Geavanceerd .
      • Voeg lazy-section toe in het veld CSS-klassen .
   3. Opslaan en bekijken:
      • Sla uw wijzigingen op en bekijk een voorbeeld van de pagina.
      • De afbeelding wordt nu alleen geladen wanneer deze in het venster verschijnt.
   Voorbeeld 2: Lazy Loading van een Instagram-feed
   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 de volgende code toe aan de HTML-widget:
   4. Opslaan en bekijken:
      • Sla uw wijzigingen op en bekijk een voorbeeld van de pagina.
      • De Instagram-feed wordt pas geladen wanneer de sectie in het venster verschijnt.
   Voorbeeld 3: Lazy Loading van een YouTube-video
   1. Bewerk de sectie:
      • Klik op het gedeelte met de YouTube-video in Elementor.
   2. Voeg de CSS-klasse toe:
      •  Ga naar het tabblad Geavanceerd .
      • Voeg lazy-section toe in het veld CSS-klassen .
   3. Opslaan en bekijken:
      • Sla uw wijzigingen op en bekijk een voorbeeld van de pagina.
      • De YouTube-video wordt alleen geladen wanneer de sectie in het venster verschijnt of wanneer de gebruiker interactie heeft met de tijdelijke aanduiding.

Aanvullende informatie

 Lazyload Elements maakt gebruik van 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 alsnog correct worden geladen.

Deze plugin vereist geen extra configuratie. Voeg simpelweg de lazy-section klasse toe aan een willekeurige Elementor-sectie of -element, en de plugin regelt de rest.

Hier kunt u de plugin downloaden .

Voor meer gedetailleerde informatie en voorbeelden kunt u contact met mij opnemen via [email protected]