Example of lazy loading when element is scrolled into viewport?

[mspanish]

Hello I've seen the actions for components, and in the issue for this addition here - #1247 - and while it mentions the idea of using a lazyload, from the samples here I'm not sure how one would actually go about adding a lazy load for items. I have a gallery of icons - and by default I load 50 of them when the user loads the collection, but I'd like to load additional icons as the user scrolls down. My old app uses a jQuery lazy loading plugin to do this. Anybody have something like that already going in Svelte? Thanks!

[Rich-Harris]

This is a fairly crude example — a more sophisticated one might include things like a configurable rootMargin, and a controlled fade in etc. But it illustrates the general idea. Note that it's using IntersectionObserver which needs a polyfill in some browsers

[mspanish]

thanks a lot @Rich-Harris I will try implementing that later today. Got a little bogged down in my SVG parsing algos, but hope to get back to the UI => Svelte conversion shortly!

[Rich-Harris]

Closing this as no action required