A svelte component to lazyload any content.
npm i svelte-lazy
For sapper server-side rendering which requires using external components, install it to devDependencies
:
npm i -D svelte-lazy
<script>
import Lazy from 'svelte-lazy';
</script>
<Lazy height={300}>
<img alt="" src="https://picsum.photos/id/412/200/300" />
</Lazy>
height: Number|String. Default: 0
(px).
keep: Boolean. Default: false
.
true
to keep all loaded ones after first appearance.offset: Number. Default: 150
(px).
placeholder: String|Component. Default: null
.
placeholderProps: Object. Default null
.
class: String. Default: ''
.
svelte-lazy ${class}
.fadeOption: Object. Default: { delay: 0, duration: 400 }
.
null
to disable it.onload: Function (node) => {}. Default: null
.
resetHeightDelay: Number. Default: 0
(milliseconds).
auto
after loaded. Might be useful to wait for remote resources like images.v1.2.2
v0 -> v1.0
enter viewport / no image -> loaded
not loaded -------------->
\ with image -> load event -> loaded
|
|
show placeholder | show content
Before load
<div class="svelte-lazy ${class}">
<div class="svelte-lazy-placeholder">...</div>
</div>
After load
<div class="svelte-lazy ${class}">
<div class="svelte-lazy-content">...</div>
</div>
git clone https://github.com/leafOfTree/svelte-lazy
cd svelte-lazy
npm i
npm start
npm test
For maintenance, bump the version in package.json
then run npm publish
.
Based on sveltejs/component-template: A base for building shareable Svelte components