https://github.com/binsarjr/svelte-lazyimage-cache

Lazy Image with IntersectionObserver and cache action for Svelte/SvelteKit.
https://github.com/binsarjr/svelte-lazyimage-cache

hacktoberfest lazyimage lazyload svelte svelte-action sveltekit

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/binsarjr/svelte-lazyimage-cache
• Owner: binsarjr
• Created: 2022-10-16T08:13:34.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-04T16:12:12.000Z (over 1 year ago)
• Last Synced: 2024-09-17T03:30:59.287Z (4 months ago)
• Topics: hacktoberfest, lazyimage, lazyload, svelte, svelte-action, sveltekit
• Language: TypeScript
• Homepage: https://svelte-lazyimage-cache.vercel.app
• Size: 48.8 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Lazy Image Cache

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

## Contributing

better docs

## Installation

```bash

// Using Yarn to install

yarn add --dev svelte-lazyimage-cache

// or if you prefer NPM

npm install --save-dev svelte-lazyimage-cache

```

## Usage Sample

```svelte

  // 	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]=''

	}

console.log('load from cache')} on:imgload={() => console.log("Load from internet")}/>

{#each onlyForLooping as _}

console.log('load from cache')} on:imgload={() => console.log("Load from internet")}/>

{/each}

  

```