@svelte-bin/image
v0.0.1
Published
action for image
Downloads
2
Readme
@svelte-bin/image
action for image
Svelte Lazy Image
Lazy Image with IntersectionObserver and cache action for Svelte/SvelteKit.
Installation
// Using Yarn to install
yarn add --dev @svelte-bin/image
// or if you prefer NPM
npm install --save-dev @svelte-bin/image
Usage Sample
<script>
// for first time you will get all image from this load from internet
// its normal because no image cached before
// so if you wanna see its working, try it will with change looping or something reactivity will work
import { lazyimage } from '@svelte-bin/image';
const placeholder = 'https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif';
// try change size and see image load from internet or cache
const src = 'https://random.imagecdn.app/200/250';
const alt = 'Random Image';
let onlyForLooping = [];
for (let i = 0; i < 100; i++) {
onlyForLooping[onlyForLooping.length] = '';
}
</script>
<!-- No Cache -->
<img
use:lazyimage={{ cache: false }}
src={placeholder}
data-src={src}
{alt}
on:cacheload={() => console.log('load from cache')}
on:imgload={() => console.log('Load from internet')}
/>
<!--
Check console when scrolling. if your brwoser support intersection observer
and you enable cache,another image with same url (cached) will use instead of load from internet
-->
{#each onlyForLooping as _}
<!-- With Cache -->
<img
use:lazyimage
src={placeholder}
data-src={src}
{alt}
on:cacheload={() => console.log('load from cache')}
on:imgload={() => console.log('Load from internet')}
/>
{/each}