Natuurlijk! Lazy loading is een uitstekende manier om de prestaties van je Svelte-applicatie te verbeteren door middelen pas te laden wanneer ze zichtbaar of nodig zijn. Hier volgt een stapsgewijze uitleg en voorbeelden, inclusief het lazy loaden van afbeeldingen in een productgalerij. **1. Lazy loading van componenten met dynamic imports** In Svelte kun je componenten dynamisch importeren met `import()`. Dit zorgt dat de component pas wordt geladen wanneer deze nodig is. **Voorbeeld:** ```svelte <script> let showDetails = false; let ProductDetails; async function loadDetails() { if (!ProductDetails) { const module = await import('./ProductDetails.svelte'); ProductDetails = module.default; } showDetails = true; } </script> <button on:click={loadDetails}>Bekijk details</button> {#if showDetails} <svelte:component this={ProductDetails} /> {/if} ``` **2. Lazy loading van afbeeldingen** De meest voorkomende toepassing van lazy loading is voor afbeeldingen. Moderne browsers ondersteunen het `loading="lazy"` attribuut op `<img>` tags, wat eenvoudig te implementeren is. **Voorbeeld:** ```svelte {#each producten as product} <img src={product.afbeelding} alt={product.naam} loading="lazy" /> {/each} ``` **3. Geavanceerde lazy loading met Intersection Observer** Voor meer controle en fallback-opties kun je de Intersection Observer API gebruiken. Hiermee kunnen we bepalen wanneer een element zichtbaar wordt en dan de afbeelding laden. **Voorbeeld:** Maak een component `LazyImage.svelte`: ```svelte <script> import { onMount } from 'svelte'; export let src; export let alt = ''; let observer; let imgRef; let isVisible = false; onMount(() => { observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { isVisible = true; observer.disconnect(); } }, { threshold: 0.1 } ); observer.observe(imgRef); }); </script> <img bind:this={imgRef} src={isVisible ? src : ''} alt={alt} /> ``` Gebruik deze component in je galerij: ```svelte {#each producten as product} <LazyImage src={product.afbeelding} alt={product.naam} /> {/each} ``` **4. Best practices voor optimale user experience** - **Gebruik `loading="lazy"` waar mogelijk**: eenvoudig en breed ondersteund. - **Gebruik Intersection Observer voor meer controle**: voor bijvoorbeeld het laden van complexe componenten of grote afbeeldingen. - **Optimaliseer afbeeldingen**: gebruik gecomprimeerde formaten (zoals WebP) en juiste afmetingen. - **Progressieve afbeeldingen**: laad lage resolutie eerst, later verversen met hogere resolutie. - **Placeholder of blur-up techniek**: toon een vage of placeholder afbeelding totdat de echte afbeelding geladen is. **Samenvatting** - Voor eenvoudige lazy loading van afbeeldingen: gebruik `loading="lazy"`. - Voor meer controle: implementeer Intersection Observer in een eigen component. - Voor componenten: gebruik dynamic import (`import()`) om ze pas te laden wanneer nodig. Met deze aanpak verbeter je de laadtijden, bespaar je bandbreedte en zorg je voor een soepelere gebruikerservaring.

Zeker! Hier is een uitgebreide uitleg over lazy loading in Svelte, specifiek voor afbeeldingen in een productgalerij. ### 1. Lazy Loading van Afbeeldingen (Productgalerij) #### Optie A: Native Lazy Loading (Aanbevolen voor eenvoudige gevallen) Moderne browsers ondersteunen native lazy loading via het `loading="lazy"` attribuut. ```svelte <!-- ProductGalerij.svelte --> <script> export let productImages = []; </script> <div class="gallery"> {#each productImages as image} <img src={image.thumbnail} data-src={image.fullSize} alt={image.alt} loading="lazy" class="product-image" /> {/each} </div> <style> .product-image { width: 100%; height: auto; transition: opacity 0.3s; } </style> ``` **Voordelen:** - Eenvoudig te implementeren - Geen JavaScript nodig - Goede browserondersteuning (Chrome, Firefox, Edge) #### Optie B: Intersection Observer API (Meer controle) Voor geavanceerdere scenario's of oudere browserondersteuning: ```svelte <!-- LazyImage.svelte --> <script> export let src; export let alt; export let placeholder = "/placeholder.jpg"; let imgRef; let inView = false; import { onMount } from 'svelte'; onMount(() => { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { inView = true; observer.unobserve(imgRef); } }); }, { rootMargin: '50px' }); // Start laden 50px voordat element zichtbaar is observer.observe(imgRef); return () => observer.disconnect(); }); </script> <img bind:this={imgRef} src={inView ? src : placeholder} alt={alt} class:loaded={inView} /> <style> img { opacity: 0; transition: opacity 0.5s; } .loaded { opacity: 1; } </style> ``` **Gebruik in je galerij:** ```svelte <!-- ProductGalerij.svelte --> <script> import LazyImage from './LazyImage.svelte'; export let productImages = []; </script> <div class="gallery"> {#each productImages as image} <LazyImage src={image.fullSize} alt={image.alt} placeholder={image.thumbnail} /> {/each} </div> ``` ### 2. Best Practices voor Gebruikerservaring #### A. Placeholders gebruiken ```svelte <script> // Low-quality image placeholder (LQIP) export let lqip = "data:image/svg+xml;base64,..."; // Kleine base64 placeholder export let src; let loaded = false; </script> <img src={lqip} alt="placeholder" class="placeholder" /> <img src={src} alt="product image" class:loaded={loaded} on:load={() => loaded = true} /> <style> .placeholder { filter: blur(10px); transition: opacity 0.3s; } img { position: absolute; top: 0; left: 0; } .loaded { opacity: 1; } </style> ``` #### B. Responsive images met srcset ```svelte <img loading="lazy" srcset=" image-320w.jpg 320w, image-640w.jpg 640w, image-1200w.jpg 1200w " sizes="(max-width: 600px) 320px, 640px" src="image-640w.jpg" alt="product image" /> ``` ### 3. Geavanceerde Implementatie met Svelte Actions ```svelte <!-- lazyLoad.js --> export function lazyLoad(node, src) { let observer; const loadImage = () => { node.src = src; }; if (IntersectionObserver) { observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { loadImage(); observer.unobserve(node); } }); }, { threshold: 0.1 }); observer.observe(node); } else { // Fallback voor oudere browsers loadImage(); } return { destroy() { observer?.disconnect(); } }; } ``` **Gebruik:** ```svelte <script> import { lazyLoad } from './lazyLoad.js'; </script> <img use:lazyLoad={imageUrl} alt="product" class="product-image" /> ``` ### 4. Preloading Strategieën ```svelte <script> import { onMount } from 'svelte'; // Preload eerste 3 afbeeldingen onMount(() => { const preloadImages = productImages.slice(0, 3); preloadImages.forEach(image => { const link = document.createElement('link'); link.rel = 'preload'; link.as = 'image'; link.href = image.fullSize; document.head.appendChild(link); }); }); </script> ``` ### 5. Performance Monitoring ```svelte <script> import { onMount } from 'svelte'; onMount(() => { // Track lazy loading performance const observer = new PerformanceObserver((list) => { list.getEntries().forEach(entry => { console.log('Lazy loaded image:', entry); }); }); observer.observe({ entryTypes: ['resource'] }); }); </script> ``` ### Belangrijkste Best Practices: 1. **Breekpunt kiezen**: Start laden wanneer afbeelding 50-100px van viewport verwijderd is 2. **Placeholders**: Gebruik LQIP of SVG placeholders voor betere UX 3. **Error handling**: Voeg fallbacks toe voor mislukte loads 4. **Responsive images**: Gebruik srcset voor verschillende schermgroottes 5. **Progressive loading**: Toon eerst thumbnails, daarna full-size 6. **Performance budget**: Stel maximale bestandsgroottes per afbeelding in Deze aanpak zorgt voor snellere initial page loads en een betere gebruikerservaring, vooral bij galerijen met veel afbeeldingen!