Lazy load image with Svelte
4/26/2022, 6:41:12 PM
by Leo Voon
Install package svelte-lazy-image to get the job done.
There are few options to render placeholder image on the page
- img src=” url “
- img src=” static asset “
- img src={loadingImage}
Add style to your image with dedicated classes
:global(.svelte-lazy-image) {}
:global(.svelte-lazy-image--loaded) {}Where to find placeholder? Here are some interesting resources.
https://css-tricks.com/simple-image-placeholders-with-svg/