Fördröjd laddning och Suspense-liknande UX
Visa skelettladdare medan strömmade data löses upp för bättre upplevd prestanda.
Fördröjd laddning och Suspense-liknande UX är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Skeleton UI
Visa platshållarformer medan data läses in. Användarna uppfattar sidan som snabbare.
Kombinera med strömning
Rendera skeletons i pending-blocket i {#await}.
{#await data.slow}
<div class="skeleton" />
{:then result}
<Card data={result} />
{/await}Progressiv visning
Bygg upp skeletons i lager för att visa sektioner allt eftersom deras data anländer.
Animering
Animera skeletons med ett diskret skimrande för ett mer genomarbetat intryck.
Felförgrening
Inkludera alltid {:catch} för smidig felhantering.
Initial rendering
Strömmade data renderar layouten direkt, medan endast den databeronde sektionen väntar.
Prestandamått
Strömning förbättrar måtten Largest Contentful Paint och First Contentful Paint.
Strömma inte för mycket
Kritiska data ovanför vecket bör inte strömmas, eftersom användarna behöver dem direkt.
Kombinera med caching
Cachelagra resultaten så att efterföljande navigeringar kan hoppa över laddningstillståndet.
Jämförelse med Suspense
SvelteKits mönster påminner om Reacts Suspense utan de nya API:erna.
Användarfokus
Tänk alltid på vad användaren ser först. Strömma sekundära data och rendera det primära innehållet snabbt.
Snabbkontroll
Varför använder man skeletons?
Sammanfattning
Kombinera strömmad inläsning med Skeleton UI för en Suspense-liknande UX som håller användarna engagerade medan data hämtas.
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
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Fördröjd laddning och Suspense-liknande UX” gratis?
Ja – hela texten till ”Fördröjd laddning och Suspense-liknande UX” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Fördröjd laddning och Suspense-liknande UX”?
Visa skelettladdare medan strömmade data löses upp för bättre upplevd prestanda. Ni övar på Sveltejs 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 Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs 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 ”Fördröjd laddning och Suspense-liknande UX”?
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 Sveltejs Academy-lektionen?
Ja. Varje Sveltejs 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
- Strömmande data med promises i load
- Fördröjd laddning och Suspense-liknande UX
- Strömma från servern med +server.js
- Progressiv hydrering