Lazy-Loading Images and Components in Svelte and SvelteKit using Typescript

Introduction

User experience on websites and applications is one if not the most important part that must not be overlooked in the development process. A crucial part of offering an excellent user experience involves making sure your website or application loads quickly and efficiently. Lazy-loading images and components have emerged as a popular methodology to minimize load times and enhance your overall performance. This article focuses on the amalgamation of the progressive JavaScript framework Svelte, along with SvelteKit and Typescript, to implement meticulous lazy-loading. I will walk you through the process, explaining how Svelte and SvelteKit, when combined with the strict syntactical superset of JavaScript, i.e, Typescript, can aid in incorporating the lazy-loading strategy to significantly improve the performance of your web application.

Creating a custom modifier

LazyLoadModifier.ts

• Create a new file called LazyLoadModifier.ts in your $lib.
• The file should have the following content:

let observer: IntersectionObserver;

function getObserver() {

    if (observer) return;

    observer = new IntersectionObserver(
        (entries: IntersectionObserverEntry[]) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.dispatchEvent(new CustomEvent('isVisible'));
                }
            });
        }
    );
}

export default function lazyLoad(element: any) {
    getObserver();
    
    observer.observe(element);

    return {
        destroy() {
            observer.unobserve(element);
        }
    }
}

• We are creating a new observer for the element where we will use the modifier. The observer will emit an event called ‘isVisible’ when the element comes into the users viewport. This will make it easy to trigger the loading process of the element when the user wants to view it and thus ‘lazy loading’ it!

Using the modifier to lazy load a component

Lazy Loading a Component