LazyImage Component

The LazyImage component provides an enhanced image loading experience with support for skeleton loading states, thumbnail previews, and intelligent preloading. Perfect for optimizing image loading performance while maintaining a smooth user experience.

Key Features

• Smart Preloading: Customizable preload distance for optimized loading

• Loading States: Built-in skeleton and thumbnail loading options

• Flexible Integration: Works with both local and remote images

Basic Usage

Create a simple lazy-loaded image:

1
---
2
import { LazyImage } from '@/components/NST-components/UI';
3
import myImage from '@/assets/images/example.jpg';
4
---
5

6
<LazyImage
7
  imageProps={{
8
    src: myImage,
9
    alt: 'Example image',
10
    width: 800,
11
    height: 600,
12
  }}
13
/>

Loading Variants

Skeleton Loading

Show a skeleton loading state while the image loads:

1
<LazyImage
2
    variant="skeleton"
3
    imageProps={{
4
        src: myImage,
5
        alt: "Example with skeleton",
6
        width: 800,
7
        height: 600
8
    }}
9
/>

Thumbnail Preview

Display a low-resolution thumbnail while loading the main image:

1
<LazyImage
2
    variant="thumbnail"
3
    imageProps={{
4
        src: highResImage,
5
        alt: "High resolution image",
6
        width: 1200,
7
        height: 800
8
    }}
9
    thumbnailProps={{
10
        src: lowResImage,
11
        alt: "Low resolution preview",
12
        width: 120,
13
        height: 80
14
    }}
15
/>

Smart Preloading

Configure preloading distance to start loading images before they enter the viewport:

1
<LazyImage
2
    preloadDistance={200} // Start loading 200px before image enters viewport
3
    imageProps={{
4
        src: myImage,
5
        alt: "Preloaded image",
6
        width: 800,
7
        height: 600
8
    }}
9
/>

Component API