@svackages/lazy-action
v1.0.2
Published
![svackage logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png)
Downloads
2
Readme
Svelte action lazy load
This action uses the IntersectionObserver
to load images or iframes lazily.
It will replace data-src
with src
.
And of course it is fully typed 😉
How to use
Install
npm i @svackages/lazy-action
Use in svelte component (svelte-kit only)
<script>
import lazy, {newObserver} from '@svackages/lazy-action';
// You can overwrite the standard
// obeserver with the values you want
newObserver({
rootMargin: '70px 0px',
});
</script>
<img
use:lazy
data-src="https://picsum.photos/200/300"
alt="something random" />
<iframe
use:lazy
data-src="https://reitzner.at"
title="my website"></iframe>
Use in svelte component (outside svelte-kit)
<script>
import lazy, {newObserver} from '@svackages/lazy-action/browser';
// You can overwrite the standard
// obeserver with the values you want
newObserver({
rootMargin: '70px 0px',
});
</script>
<img
use:lazy
data-src="https://picsum.photos/200/300"
alt="something random" />
<iframe
use:lazy
data-src="https://reitzner.at"
title="my website"></iframe>
REPL
https://svelte.dev/repl/f6514d9b90b344a1b1bcc14814470eee?version=3.44.2