brandan/personal-website
1
0
Fork 0
Code Pull requests Activity

proper fancy image loading for buttons

Browse source
This commit is contained in:
cirroskais 2024-04-20 22:10:19 -04:00
parent 315b7576b4
commit 94bbfe98ef
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
2 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/lib/components/ImgButton.svelte
View file

@ -1,12 +1,13 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import Eye from './Icons/Eye.svelte';
/** @type {string} src */ /** @type {string} src */
export let src; export let src;
/** @type {string=} href */ /** @type {string|undefined} href */
export let href; export let href = undefined;
/** @type {HTMLImageElement} e */ /** @type {HTMLImageElement} e */
let e; let e;
@ -27,22 +28,29 @@
e.style.boxShadow = `${(-3 * xP).toFixed(2)}px ${(5 * yP).toFixed(2)}px 3px #c4bef3`; e.style.boxShadow = `${(-3 * xP).toFixed(2)}px ${(5 * yP).toFixed(2)}px 3px #c4bef3`;
}; };
e.addEventListener('mouseover', startEffect); if (src) {
e.addEventListener('mousemove', startEffect); const preload = new Image();
e.addEventListener('mouseleave', () => { preload.src = src;
e.style.transform = ''; preload.onload = () => {
e.style.boxShadow = ''; loaded = true;
});
const preload = new Image(); e.addEventListener('mouseover', startEffect);
preload.src = src; e.addEventListener('mousemove', startEffect);
preload.onload = () => (loaded = true); e.addEventListener('mouseleave', () => {
e.style.transform = '';
e.style.boxShadow = '';
});
};
}
}); });
</script> </script>
<a class="hover:shadow-2xl" {href} target="_blank"> <a class="hover:shadow-2xl" {href} target="_blank">
<img in:fade class="imgbutton {!loaded && 'hidden'}" {src} alt="Button" bind:this={e} /> {#if loaded}
<div class="animate-pulse imgbutton bg-neutral-600/50 rounded-sm {loaded && 'hidden'}"></div> <img in:fade class="imgbutton" {src} alt="Button" bind:this={e} />
{:else}
<div class="rounded-sm animate-pulse imgbutton bg-neutral-600/50"></div>
{/if}
</a> </a>
<style lang="postcss"> <style lang="postcss">

2
src/routes/+page.svelte
View file

@ -92,7 +92,7 @@
<ImgButton href="https://split.pet" src="/buttons/split.png"></ImgButton> <ImgButton href="https://split.pet" src="/buttons/split.png"></ImgButton>
<ImgButton href="https://www.mozilla.org/en-US/firefox/new/" src="/buttons/firefox.gif" <ImgButton href="https://www.mozilla.org/en-US/firefox/new/" src="/buttons/firefox.gif"
></ImgButton> ></ImgButton>
<ImgButton src="/buttons/lol.gif" href=""></ImgButton> <ImgButton src="/buttons/lol.gif"></ImgButton>
</div> </div>
</div> </div>
</div> </div>