Svelte Lazy Image Cache

Lazy Image with IntersectionObserver and cache action for Svelte/SvelteKit.

Contributing

better docs

Installation

// Using Yarn to install
yarn add --dev svelte-lazyimage-cache

// or if you prefer NPM
npm install --save-dev svelte-lazyimage-cache

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-lazyimage-cache'
	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}