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

Lib: Implement (slightly broken) lazy loading of cards

Browse Source 
Issues arise when the viewport size changes
This commit is contained in:
Christoph Urlacher
2024-12-16 19:52:46 +01:00
parent df0402a318
commit d398ab67e0
6 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
};
const img_opacity_handler = (node: HTMLElement) => {
setTimeout(() => (node.style.opacity = "1"), 10);
setTimeout(() => (node.style.opacity = "1"), 20);
};
</script>
@ -40,7 +40,7 @@
src={data}
use:img_opacity_handler
class="bg-surface-100 transition-opacity"
style="width: 100%; opacity: 0; transition-duration: 250ms;"
style="width: 100%; opacity: 0; transition-duration: 500ms;"
{...restProps}
/>
{/await}