diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/FallbackImage.svelte | 32 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 10 |
2 files changed, 37 insertions, 5 deletions
diff --git a/src/lib/FallbackImage.svelte b/src/lib/FallbackImage.svelte new file mode 100644 index 00000000..a8f367fb --- /dev/null +++ b/src/lib/FallbackImage.svelte @@ -0,0 +1,32 @@ +<script lang="ts"> + export let source: string | undefined; + export let alternative: string | undefined; + export let fallback: string | undefined; + export let maxReplaceCount = 1; + export let replaceDelay = 1000; + export let error = 'http://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg'; + + let replaceCount = 0; + + const delayedReplace = (event: Event, image: string | undefined) => { + if (replaceCount >= maxReplaceCount) return; + + setTimeout(() => { + (event.target as HTMLImageElement).src = image || ''; + + replaceCount += 1; + }, replaceDelay); + }; +</script> + +{#if replaceCount < maxReplaceCount} + <img + src={source} + alt={alternative} + loading="lazy" + class="badge" + on:error={(e) => delayedReplace(e, fallback)} + /> +{:else} + <img src={error} alt="Not found" loading="lazy" /> +{/if} diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index fc9f5d2c..67c5a2f6 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -18,6 +18,7 @@ import { activityText } from '$lib/Data/AniList/activity.js'; import SettingHint from '$lib/Settings/SettingHint.svelte'; import Popup from '$lib/Popup.svelte'; + import FallbackImage from '$lib/FallbackImage.svelte'; // import { io } from 'socket.io-client'; export let data; @@ -669,11 +670,10 @@ }${badge.description ? `\n${badge.description}` : ''}`} use:tooltip > - <img - src={cdn(thumbnail(badge.image))} - alt={badge.description} - loading="lazy" - on:error={(e) => fallback(e, thumbnail(badge.image))} + <FallbackImage + source={cdn(thumbnail(badge.image))} + alternative={badge.description} + fallback={thumbnail(badge.image)} /> </a> {/if} |