christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Lib: Update lazy components (dropdown + card now lazy)

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-16 16:44:46 +01:00
parent 0b3184ba56
commit 6b87d05de6
8 changed files with 136 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/LazyImage.svelte
View File

@ -6,19 +6,30 @@
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, ...restProps }: LazyImageProps = $props();
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;
};
// Once the image is visible, this will be set to true, triggering the loading
let load: boolean = $state(false);
</script>
<div use:lazyload onLazyVisible={lazy_visible_handler}>
<!-- 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} />