svelte-lazy

A Svelte component for lazy-loading content with customizable options.

Purpose:
To efficiently load content only when it enters the viewport, improving performance by reducing initial page load time.

Key Features:

• Supports lazy-loading any content (e.g., images, components) with a fade-in transition.
• Configurable placeholder, height, and offset triggers.
• Option to keep loaded content or unload it when leaving the viewport.
• Lifecycle events for fine-grained control.

Target Audience:
Svelte developers looking to optimize page performance by deferring non-critical content loading.

Framework Support:
Primarily designed for Svelte (v3 & 4 compatible).

Props:

• height: Initial component height (prevents layout shifts)
• keep: Persist loaded content (default: false)
• offset: Viewport trigger offset (default: 150px)
• placeholder: Custom placeholder content/component
• fadeOption: Transition settings (can be disabled)
• onload: Callback when content loads

DOM Structure:
Dynamically switches between placeholder and content divs with appropriate CSS classes.

Examples:

• Demo on Svelte REPL
• Live Examples with source code