43 lines
1.1 KiB
Svelte
43 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { HTMLImgAttributes } from "svelte/elements";
|
|
import { lazyload } from "$lib/lazyload";
|
|
|
|
interface LazyImageProps extends HTMLImgAttributes {
|
|
/** The URL to the image resource to lazyload */
|
|
src: string;
|
|
}
|
|
|
|
let { src, ...restProps }: LazyImageProps = $props();
|
|
|
|
const blobToBase64 = (blob: Blob): Promise<any> => {
|
|
return new Promise((resolve, _) => {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => resolve(reader.result);
|
|
reader.readAsDataURL(blob);
|
|
});
|
|
};
|
|
|
|
const loadImage = async (url: string): Promise<any> => {
|
|
return await fetch(url)
|
|
.then((response) => response.blob())
|
|
.then((blob) => blobToBase64(blob));
|
|
};
|
|
|
|
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}>
|
|
{#if load}
|
|
{#await loadImage(src)}
|
|
<!-- Loading... -->
|
|
{:then data}
|
|
<img src={data} style="width: 100%" {...restProps} />
|
|
{/await}
|
|
{/if}
|
|
</div>
|