Lazy loading med IntersectionObserver
Skjut upp inläsningen av bilder och innehåll tills de kommer in i bildytan
Lazy loading med IntersectionObserver är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Bortom inbyggd loading="lazy"
Inbyggd lazy loading täcker <img> och <iframe>. För allt annat – bakgrundsbilder, video, kostsamma komponenter och tredjepartswidgetar – är IntersectionObserver rätt verktyg för att skjuta upp arbetet tills elementet är nära visningsområdet.
Mönstret
Märk element som ska läsas in senare med ett data-src-attribut som innehåller den riktiga källan och rendera en liten platshållare. Observera varje element. När det överlappar visningsområdet byter ni data-src mot src (eller aktiverar elementet på annat sätt) och slutar observera det så att callbacken aldrig körs igen.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Lazy loading av bakgrundsbilder
CSS-egenskapen background-image kan inte lazy-loadas inbyggt. När elementet överlappar visningsområdet anger ni el.style.backgroundImage = `url("${el.dataset.bg}")` eller lägger till en CSS-klass som definierar background-image. Bilden börjar laddas ned då.
Lazy loading av video
För videor under den första vyn utelämnar ni src och source-element från början. När videon överlappar visningsområdet infogar ni <source>-taggarna och anropar video.load(). Utan detta kan videons metadata laddas ned direkt, även innan användaren rullat i närheten av elementet.
Tredjepartwidgetar
Inbäddningar från sociala medier, kommentarswidgetar och chattskript kan hämta flera megabyte. När elementet överlappar visningsområdet importerar ni widgetens initieringsskript dynamiskt: await import("/embed.js"). Kostnaden uppstår endast när användaren faktiskt rullar till avsnittet.
Lazy loading av iframe (bortom loading="lazy")
Inbyggd lazy loading av iframe laddar fortfarande ned iframe-dokumentet. För tunga inbäddningar, som kartor och videospelare, använder ni ett ”fasad”-mönster: visa en platshållarbild och ersätt den med den riktiga iframen vid klick eller när den överlappar visningsområdet. Det minskar sidans initiala storlek dramatiskt.
rootMargin för förhandsinläsning
rootMargin: "200px" börjar läsa in 200 pixlar innan elementet kommer in i visningsområdet. Anpassa värdet efter rullningshastigheten: är det för litet ser användaren platshållare vid snabb rullning, och är det för stort motverkas syftet med lazy loading eftersom allt läses in.
Sluta observera efter aktivering
Anropa alltid observer.unobserve(element) när lazy loading har aktiverats. Annars fortsätter callbacken att köras varje gång elementet kommer in i visningsområdet igen – vilket slösar processorresurser och kan orsaka fel om aktiveringen inte är idempotent.
Reservera utrymme
Ange bredd och höjd för bilder som läses in med lazy loading och en min-height för lata behållare. Utan explicita dimensioner flödar sidan om när innehållet läses in, vilket orsakar störande hopp i rullningen och ett dåligt resultat för Cumulative Layout Shift.
Reservlösning utan JavaScript
För fullständig progressiv förbättring kan ni omsluta det lata elementet i <noscript> med den riktiga src-adressen: <noscript><img src="/photo.jpg"></noscript>. Användare utan JavaScript får bilden direkt, medan användare med JavaScript får den lata versionen. Kombinera detta med korrekt data-src-markup.
Batchhantering av många element
En enda observerarinstans kan effektivt bevaka hundratals element. Skapa inte en observerare per element. Skapa en gemensam observerare med önskade alternativ och använd observe() för att registrera varje mål.
Kombinera med inbyggd loading="lazy"
För <img> bör ni använda loading="lazy" som primär mekanism och reservera IntersectionObserver för fall som inbyggd lazy loading inte täcker. De fungerar bra tillsammans: den inbyggda funktionen hanterar bilder under den första vyn, medan IntersectionObserver hanterar bakgrunder, komponenter och andra anpassade laddare.
Kunskapskontroll
Varför är det viktigt att anropa observer.unobserve(element) efter att ett element med lazy loading har aktiverats?
Sammanfattning
IntersectionObserver utökar lazy loading bortom inbyggd <img loading="lazy"> till bakgrunder, video, tredjepartswidgetar och dynamiska komponentimporter. Använd data-src-platshållare, byt vid överlappning och sluta observera efter aktivering. Förhandsläs in med rootMargin, reservera utrymme med bredd och höjd, tillhandahåll en noscript-reservlösning och kombinera med inbyggd lazy loading där det passar.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Lazy loading med IntersectionObserver” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Lazy loading med IntersectionObserver”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Lazy loading med IntersectionObserver”?
Skjut upp inläsningen av bilder och innehåll tills de kommer in i bildytan Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Lazy loading med IntersectionObserver”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- IntersectionObserver API och tröskelvärden
- Lazy loading med IntersectionObserver
- Implementera oändlig rullning
- Konfigurera rullningskopplade animeringar