39 lines
1.1 KiB
Svelte
39 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { HTMLImgAttributes } from "svelte/elements";
|
|
import { lazyload } from "$lib/lazyload";
|
|
import { fetch_image_base64 } from "$lib/image";
|
|
|
|
interface LazyImageProps extends HTMLImgAttributes {
|
|
/** The URL to the image resource to lazyload */
|
|
src: string;
|
|
|
|
/** The aspect ratio width used to reserve image space (while its loading) */
|
|
imgwidth: number;
|
|
|
|
/** The aspect ratio height used to reserve image space (while its loading) */
|
|
imgheight: number;
|
|
}
|
|
|
|
let { src, imgwidth, imgheight, ...restProps }: LazyImageProps = $props();
|
|
|
|
// Once the image is visible, this will be set to true, triggering the loading
|
|
let load: boolean = $state(false);
|
|
|
|
const lazy_visible_handler = () => {
|
|
load = true;
|
|
};
|
|
</script>
|
|
|
|
<!-- Show a correctly sized div so the layout doesn't jump. -->
|
|
<div
|
|
use:lazyload
|
|
onLazyVisible={lazy_visible_handler}
|
|
style="width: 100%; aspect-ratio: {imgwidth} / {imgheight};"
|
|
>
|
|
{#if load}
|
|
{#await fetch_image_base64(src) then data}
|
|
<img src={data} style="width: 100%" {...restProps} />
|
|
{/await}
|
|
{/if}
|
|
</div>
|