36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
// https://www.alexschnabl.com/blog/articles/lazy-loading-images-and-components-in-svelte-and-sveltekit-using-typescript
|
|
|
|
let observer: IntersectionObserver;
|
|
|
|
const getObserver = () => {
|
|
if (observer) return;
|
|
|
|
observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.dispatchEvent(new CustomEvent("LazyVisible"));
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Use this as an action on elements that should be only loaded when moved into view.
|
|
* Note that if the element's size is 0 on mount, multiple elements could be in-view that
|
|
* would be out-of-view with their correct size.
|
|
* This happens for <div> elements without content for example.
|
|
*/
|
|
export const lazyload = (node: HTMLElement) => {
|
|
// The observer determines if the element is visible on screen
|
|
getObserver();
|
|
|
|
// If the element is visible, the "LazyVisible" event will be dispatched
|
|
observer.observe(node);
|
|
|
|
return {
|
|
destroy() {
|
|
observer.unobserve(node);
|
|
},
|
|
};
|
|
};
|