Loading images with Svelte

Poor network conditions cause images to load slower, sometimes leading to broken layouts. You could exclusively rely on the alt attribute, but a more robust solution would handle such cases. Therefore, showing a placeholder or a spinner until displaying a fully loaded image could significantly improve the user experience.

The Image web API exposes two methods, onload and onerror that help managing these situations:

import { onMount } from 'svelte'export let src;let loaded = false;let failed = false;let loading = false;onMount(() => {    const img = new Image();    img.src = src;    loading = true;    img.onload = () => {        loading = false;        loaded = true;    };    img.onerror = () => {        loading = false;        failed = true;    };})

the above Svelte code is part of an Image component with the following template:

{#if loaded}    <img {src} />{:else if failed}    <img src="not_found.jpg" />{:else if loading}    <img src="loading.gif" />{/if}

A full working example can be found here.

Cover photo by Mike van den Bos on Unsplash