{"id":22713417,"url":"https://github.com/binsarjr/svelte-lazyimage-cache","last_synced_at":"2025-04-13T17:36:03.325Z","repository":{"id":61537080,"uuid":"552280172","full_name":"binsarjr/svelte-lazyimage-cache","owner":"binsarjr","description":"Lazy Image with IntersectionObserver and cache action for Svelte/SvelteKit.","archived":false,"fork":false,"pushed_at":"2023-10-04T16:12:12.000Z","size":50,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T08:22:16.488Z","etag":null,"topics":["hacktoberfest","lazyimage","lazyload","svelte","svelte-action","sveltekit"],"latest_commit_sha":null,"homepage":"https://svelte-lazyimage-cache.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/binsarjr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-16T08:13:34.000Z","updated_at":"2024-01-28T12:26:47.000Z","dependencies_parsed_at":"2022-10-19T22:30:46.669Z","dependency_job_id":null,"html_url":"https://github.com/binsarjr/svelte-lazyimage-cache","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binsarjr%2Fsvelte-lazyimage-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binsarjr%2Fsvelte-lazyimage-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binsarjr%2Fsvelte-lazyimage-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binsarjr%2Fsvelte-lazyimage-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/binsarjr","download_url":"https://codeload.github.com/binsarjr/svelte-lazyimage-cache/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248753101,"owners_count":21156211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","lazyimage","lazyload","svelte","svelte-action","sveltekit"],"created_at":"2024-12-10T14:09:12.663Z","updated_at":"2025-04-13T17:36:03.305Z","avatar_url":"https://github.com/binsarjr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Lazy Image Cache\nLazy Image with IntersectionObserver and cache action for Svelte/SvelteKit.\n\n## Contributing\nbetter docs\n\n## Installation\n```bash\n// Using Yarn to install\nyarn add --dev svelte-lazyimage-cache\n\n// or if you prefer NPM\nnpm install --save-dev svelte-lazyimage-cache\n```\n\n## Usage Sample\n```svelte\n\u003cscript\u003e\n  // \tfor first time you will get all image from this load from internet\n// \tits normal because no image cached before\n// \tso if you wanna see its working, try it will with change looping or something reactivity will work\n\timport {lazyimage} from 'svelte-lazyimage-cache'\n\tconst placeholder = 'https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif'\n// \ttry change size and see image load from internet or cache\n\tconst src='https://random.imagecdn.app/200/250'\n\tconst alt=\"Random Image\"\n\t\n\tlet onlyForLooping=[]\n\tfor(let i=0;i\u003c100;i++){\n\t\tonlyForLooping[onlyForLooping.length]=''\n\t}\n\u003c/script\u003e\n\n\u003c!-- No Cache --\u003e\n\u003cimg use:lazyimage={{cache:false}} src={placeholder} data-src=\"{src}\" {alt} on:cacheload={()=\u003econsole.log('load from cache')} on:imgload={() =\u003e console.log(\"Load from internet\")}/\u003e\n\n\u003c!--\nCheck console when scrolling. if your brwoser support intersection observer\nand you enable cache,another image with same url (cached) will use instead of load from internet\n--\u003e\n{#each onlyForLooping as _}\n\u003c!-- With Cache  --\u003e\n\u003cimg use:lazyimage src={placeholder} data-src={src} {alt} on:cacheload={()=\u003econsole.log('load from cache')} on:imgload={() =\u003e console.log(\"Load from internet\")}/\u003e\n{/each}\n  \n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinsarjr%2Fsvelte-lazyimage-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinsarjr%2Fsvelte-lazyimage-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinsarjr%2Fsvelte-lazyimage-cache/lists"}